重新申請同位素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();重新加載解決了此問題，並且很好地重新應用了所有項目的樣式。