Question

我试过这个

$("#add").click(function(){
    var $newIems = $("<div class='post-body post item'>itemName</div>")
    $(".items").isotope("append", $newIems, true);
});

$("#sort").click(function(){
    $('.items').isotope({
        getSortData : {
            content: function ( $elem ) {
                return $elem.find('.post-content').text();
            }
        }
    });
    $('.items').isotope({ sortBy : 'date' });
    $('.items').isotope( 'reLayout' )

});

但物品不会被分类。通常可以将新物品添加到同位素容器中并在之后对它们进行分类吗？我想做的只是将新项目添加到我的直降同位素列表的顶部。

UPDATE1：
该项目已使用prepend（）附加在顶部。
我的前置代码等于Hady代码（这个问题下面的答案第二个答案）但它仍然附加在第二项中因为不会设置css顶值，这里是DOM：

<div class="items isotope" style="position: relative; overflow: hidden; height: 354px;">
       <div class="item isotope-item" style="position: absolute;">addedItem</div>
       <div class="item isotope-item" style="position: absolute; left: 0px; top: 0px;">item1</div>
       <div class="item isotope-item" style="position: absolute; left: 0px; top: 81px;">item2</div>
       <div class="item isotope-item" style="position: absolute; left: 0px; top: 172px;">item3</div>
</div>

正如您所看到的，现有项目也没有获得额外的+顶部像素。所以我想在追加新项目之后我必须调用reLayout（）吗？

Answer 1

我认为你想使用addItems方法。检查documentation。您还可以尝试demo。

Answer 2

如果你想要的只是在容器的开头插入新商品，那么你需要预装新创建的商品，而不是追加。

$("#add").click(function(){
    var $newIems = $("<div class='post-body post item'>itemName</div>")
    $(".items").prepend($newIems).isotope('reloadItems');    
    return false;
});

追加后的JQuery Isotope排序

2 个答案: