重新应用同位素 Jquery

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

根据文档，您可以使用$grid.isotope('reloadItems') .我遇到了一个问题，即重置样式，但仅适用于新项目，因此每次使用 ajax 添加项目时，它们都会放置在旧项目之上。重新加载$grid.isotope();修复了此问题，并很好地为所有项目重新应用了样式。