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

Question

我正在使用 Isotope 插件在我的页面上形成元素网格。这些元素具有不同的高度，并按 data-time 属性排序。

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>

JavaScript

(function($){
    $('#container').isotope({
        itemSelector: '.item',
        getSortData: {
            time: '[data-time]',
        },
        sortBy: 'time',
        sortAscending: false
    });
}(jQuery));

Here's jsfiddle 示例我目前所拥有的。

因此，如您所见，第 4 个元素附加到填充最少的 "column"。

1 2 3
    4

我希望同位素将其放在第一个元素下。

1 2 3
4

我知道可以通过启用fitRows布局（jsfiddle）来实现，但是这种布局模式适用于等高元素。

有什么"painless"方法可以让同位素忽略最短的"column"并在"N elements per row"基础上追加元素吗？

Answer 1

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

Answer 2

每次使用 isotop 插件时，您需要在 .item 元素中添加一个 div 并计算 .list-item-wrapper 的高度

HTML:

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

Javascript:

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);

这会有所帮助。

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

Isotope: positioning of elements that have different heights

jquery

html

css

grid

jquery-isotope