Как создать макет масонства из l oop jQuery

Question

Я пытаюсь динамически создать макет Masonry, используя al oop, но я застрял.

Я хочу что-то вроде этого:

но я не могу по какой-то причине.

js:

var areaList = [
    { name: "name", color: "#f3d33a", width: 440, height: 260 },
    { name: "", color: "green", width: 240, height: 260 },
    { name: "name", color: "green", width: 240, height: 260 },
    { name: "", color: "green", width: 240, height: 260 },
    { name: "", color: "green", width: 240, height: 260 },
    { name: "", color: "green", width: 440, height: 260 },
    { name: "", color: "#f3d33a", width: 440, height: 200 },
    { name: "", color: "blue", width: 240, height: 200 },
    { name: "name", color: "blue", width: 260, height: 200 },
    { name: "", color: "blue", width: 150, height: 200 },
    { name: "", color: "blue", width: 310, height: 200 },
    { name: "", color: "blue", width: 440, height: 200 },
    { name: "", color: "#f3d33a", width: 440, height: 340 },
    { name: "", color: "orange", width: 240, height: 340 },
    { name: "name", color: "orange", width: 240, height: 340 },
    { name: "", color: "orange", width: 240, height: 340 },
    { name: "", color: "orange", width: 240, height: 340 },
    { name: "", color: "orange", width: 440, height: 340 },
]

function createAreas() {
    $(areaList).each(function (i, data) {
        if (data.name != "") {
            var objects = `<div class="grid-item" id="box${i}">
 <div class="zone-name">${data.name}</div>
</div>`
        } else {
            var objects = `<div class="grid-item" id="box${i}"></div>`
        }

        $(".grid").append(objects);

        splitAreas(data.color, data.width, data.height,i)
    });
}

function splitAreas(color, width, height, id) {
    console.log(color, width, height)
    $('#box' + id + '').css("background-color", color)
    $('#box' + id + '').css("width", width + "px")
    $('#box' + id + '').css("height", height + "px")
}

createAreas()

HTML:

<div class="grid"></div>

CSS:

.grid {
    width: 100%;
}

.grid-item {
    margin-left: 11px;
    margin-bottom: 11px;
    float: left;
    border-radius: 10px;
}

Как разделить зоны, как на картинках, по тому же принципу, который я сейчас использую?

Answer 1

var areaList = [
    { name: "name", color: "#f3d33a", width: 440, height: 260 },
    { name: "", color: "green", width: 240, height: 260 },
    { name: "name", color: "green", width: 240, height: 260 },
    { name: "", color: "green", width: 240, height: 260 },
    { name: "", color: "green", width: 240, height: 260 },
    { name: "", color: "green", width: 440, height: 260 },
    { name: "", color: "#f3d33a", width: 440, height: 200 },
    { name: "", color: "blue", width: 240, height: 200 },
    { name: "name", color: "blue", width: 260, height: 200 },
    { name: "", color: "blue", width: 150, height: 200 },
    { name: "", color: "blue", width: 310, height: 200 },
    { name: "", color: "blue", width: 440, height: 200 },
    { name: "", color: "#f3d33a", width: 440, height: 340 },
    { name: "", color: "orange", width: 240, height: 340 },
    { name: "name", color: "orange", width: 240, height: 340 },
    { name: "", color: "orange", width: 240, height: 340 },
    { name: "", color: "orange", width: 240, height: 340 },
    { name: "", color: "orange", width: 440, height: 340 },
]

function createAreas() {
    var grid = $(".grid")
    
    $(areaList).each(function (i, data) {
      var style = `background-color:${data.color}; width:${data.width}px; height:${data.height}px`
      var name = data.name != "" ? `<div class="zone-name">${data.name}</div>` : ''

      grid.append(`<div class="grid-item" id="box${i}" style="${style}">${name}</div>`);
    });
}

createAreas()

.grid {
    width: 100%;
}

.grid-item {
    margin-left: 11px;
    margin-bottom: 11px;
    float: left;
    border-radius: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<div class="grid"></div>