使用同位素排列网格

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。