重新应用同位素 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

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

重新应用同位素 Jquery

Reapply Isotope Jquery

jquery

jquery-isotope