Question

我们有一个不同大小的网格（4种风格）。

包装盒样式1：宽度200px高度200px
Box Style 2：宽度100px高度100px
Box Style 3：宽度200px高度100px
Box Style 4：宽度100px高度200px

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

但不幸的是，我们无法以同样的方式运作。这是我们代码的一个方面： 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

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

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

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

    masonry: {
        columnWidth: 100
    }
});

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

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

1 个答案: