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个元素被附加到填充最少的“列”。

1 2 3
    4

我想将同位素放在第一个元素下面。

1 2 3
4

我知道可以通过启用fitRows布局（jsfiddle）来实现，但此布局模式适用于相同高度的元素。

是否有任何“无痛”的方法使同位素忽略最短的“列”并在“每行N个元素”的基础上追加元素？

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

这会有所帮助。

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

2 个答案: