jquery - 使用同位素排列网格

Question

我正在使用 Jquery isotope 来排列不同大小的 div。

当html是这样的：

<div id="feed">
    <div class="item size1">
    </div>     
    <div class="item size1">
    </div>                 
    <div class="item size1">
    </div>     
    <div class="item size1">
    </div>      
    <div class="item size1">
    </div>
</div>

网格排列得很好：

但是当我将html更改为：

<div id="feed">
    <div class="item size2">
    </div>     
    <div class="item size1">
    </div>                 
    <div class="item size1">
    </div>     
    <div class="item size1">
    </div>      
    <div class="item size1">
    </div>
</div>

网格如下所示：

feeddiv 很540px宽，但我希望在填充更多行之前完全使用宽度，在第二种情况下不会发生。

jquery 看起来像这样：

$('#feed').isotope({
    itemSelector: '.item',
});

Answer 1

通过为属性提供一个有限值来解决上述问题，columnWidth如下所示：

$('#container').isotope({
  masonry: {
    columnWidth: 240
  }
});

更多在这里。