Jquery 同位素：具有不同高度的元素的定位

我正在使用插件在我的页面上形成一个元素网格。这些元素具有不同的高度，并按

数据时间

属性排序

HTML

<div id="container">
    <div class="item" data-time="3" style="height:50px;">1</div>
    <div class="item" data-time="2" style="height:65px;">2</div>
    <div class="item" data-time="1" style="height:30px;">3</div>
    <div class="item" data-time="0" style="height:80px;">4</div>
</div>

jsfiddle是迄今为止我所拥有的示例

因此，如您所见，第4个元素被附加到填充最少的“列”中

我想把它放在第一个元素下面

1 2 3
4

我知道可以通过启用

fitRows

layout（）来实现，但是这种布局模式适合于等高元素

---

有没有什么“无痛”的方法可以让同位素忽略最短的“列”并在“每行N个元素”的基础上添加元素？

这似乎是不可能的。尽量不要使用同位素。

每次使用同位素插件时，都需要在.item元素中添加一个div并计数。列出项目包装高度

HTML:

<ul class="list"><li class="item"><div class="list-item-wrapper">...< /div></li></ul>

var maxHeight = 0,
    currentElementHeight;
$.each($('ul.list').find('li').find('.list-item-wrapper'), function(key, value) {
    currentElementHeight = parseInt($(value).height());
    if ( currentElementHeight > maxHeight ) {
        maxHeight = currentElementHeight;
    }
});
productCatalog.find('li').css('height', maxHeight);

这会有帮助的

<ul class="list"><li class="item"><div class="list-item-wrapper">...< /div></li></ul>

var maxHeight = 0,
    currentElementHeight;
$.each($('ul.list').find('li').find('.list-item-wrapper'), function(key, value) {
    currentElementHeight = parseInt($(value).height());
    if ( currentElementHeight > maxHeight ) {
        maxHeight = currentElementHeight;
    }
});
productCatalog.find('li').css('height', maxHeight);