javascript - 如何从循环 jQuery 创建砌体布局

Question

我正在尝试使用循环动态创建砌体布局，但我被卡住了。

我想要这样的东西：

但我不能出于某种原因。

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;
}

如何使用我目前使用的相同原理分割区域，如图片中的区域？

标签： javascriptjquery

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>