javascript - jQuery 同位素 : Fluid grid not working correctly with different sized elements

Question

我们有一个带有不同大小盒装(4 种样式)的网格。

• 框样式 1:宽度 200px 高度 200px
• 框样式 2:宽度 100px 高度 100px
• 框样式 3:宽度 200 像素高度 100 像素
• 框样式 4:宽度 100px 高度 200px

我们尝试使用与布局模式砌体相同的示例，如下页所示:http://isotope.metafizzy.co/layout-modes.html

但不幸的是，我们不能让它以同样的方式工作。这是我们代码的 jsfiddle: http://jsfiddle.net/x38jgn75/

HTML:

<div id="container">
    <div class="box box1"></div>
    <div class="box box2"></div>
    <div class="box box3"></div>
    <div class="box box2"></div>
    <div class="box box3"></div>
    <div class="box box1"></div>
    <div class="box box2"></div>
    <div class="box box4"></div>
    <div class="box box3"></div>
    <div class="box box3"></div>
    <div class="box box1"></div>
    <div class="box box2"></div>
    <div class="box box3"></div>
    <div class="box box3"></div>
    <div class="box box1"></div>
    <div class="box box2"></div>
    <div class="box box4"></div>
</div>

CSS:

#container {
    width: 400px;
}
.box1 {
    background-color: red;
    width: 200px;
    padding-bottom: 50%;
}
.box2 {
    background-color: yellow;
    width: 100px;
    padding-bottom: 25%;
}
.box3 {
    background-color: blue;
    width: 200px;
    padding-bottom: 25%;
}
.box4 {
    background-color: green;
    width: 100px;
    padding-bottom: 50%;
}

JS:

$(function () {
    var $container = $('#container');
    $container.isotope({
        itemSelector: '.box'
    });
});

提前谢谢你。

Answer 1

砌体模式的文档指出您需要指定列宽。

在你的 fiddle 中，试试这个:

$container.isotope({
    // options
    itemSelector: '.box',

    masonry: {
        columnWidth: 100
    }
});

此处示例:http://jsfiddle.net/x38jgn75/1/