Question

我使用ajax调用将网格元素添加到DOM中，并且想要在DOM准备好后重新应用同位素。有人知道吗？

示例代码：

$('#getNewData').on('click',function()){
    $.ajax({
         type: 'GET',
         url: myUrl,
         dataType: 'json',
         success: function(data){
             $('#gridContainer').empty();

             $.each(data, function(){
                 var gridContent = '<div class="grid-item filter1 filter2 filter3">'+
                                          '<h3 class="name">' + this.name + '</h3>' +
                                          '<div class="grid-item-content"> + this.vale + '</div>'+
                                    '</div>';
                 $('#gridContainer').append(gridContent);
             });
         }
        });

    var $grid = $('.grid').isotope({
        itemSelector: '.grid-item',
        masonry: {
            columnWidth: 160
        }
    });

    $grid.on('click', '.grid-item', function () {
        // change size of item by toggling gigante class
        $(this).toggleClass('grid-item--gigante');
        $grid.isotope('layout');
    });

});

Answer 1

根据docs，您可以使用$grid.isotope('reloadItems')。我有一个问题，这个重置样式但只适用于新项目，所以每次项目都添加了ajax，它们被置于旧项目之上。使用$grid.isotope();进行重新加载修复此问题，并为所有项目重新应用样式。

重新申请同位素Jquery

1 个答案: