使用同位素排列网格

Question

我正在使用Jquery同位素来安排不同大小的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>

网格看起来像这样：

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

jquery看起来像这样：

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

Answer 1

通过为属性columnWidth提供有限值来解决上述问题：

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

更多here。