使用同位素排列網格

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。