jQuery Isotope：流体网格无法与不同大小的元素一起正常工作答案

【问题标题】：jQuery Isotope: Fluid grid not working correctly with different sized elementsjQuery Isotope：流体网格无法与不同大小的元素一起正常工作
【发布时间】：2014-11-01 12:54:51
【问题描述】：

我们有一个不同大小的框格（4 种样式）。

框样式 1：宽 200px 高 200px
方框样式2：宽100px 高100px
框样式 3：宽 200px 高 100px
方框样式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'
    });
});

提前谢谢你。

【问题讨论】：

标签： javascript jquery html jquery-isotope fluid-layout

【解决方案1】：

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

在你的小提琴中，试试这个：

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

    masonry: {
        columnWidth: 100
    }
});

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

【讨论】：