Question

我有一个漂亮的砌体网格。它完美地加载并重新调整。但我正在使用一个过滤结果的插件（WordPress的搜索和过滤插件）并使用AJAX来做到这一点。但是在AJAX调用之后，我的砌体网格不再有效了。我知道这是因为我需要在AJAX调用后重新加载Masonry，但我不知道该怎么做。有谁知道我怎么做到这一点？

这是我的基本HTML结构。

<div id="masonry-container>
     <div id="search-results-container" class="masonry-brick">
       <h2>Title</h2>
       <img src="myimage.jpg">
       <p>Content</p>
</div>
</div>

.search-results-container是重复的div。

我的JS看起来像这样：

    jQuery(window).load(function() {


      var container = document.querySelector('#masonry-container');
      var msnry = new Masonry( container, {
        itemSelector: '.search-results-card',
        columnWidth: '.search-results-card',                
      });  

});

在启动AJAX并重新加载容器之前，这很有效。然后砌体的计算结束了，一切都没有了。在AJAX调用之后，我需要找到一种重新加载Masonry的方法。有什么想法吗？

Answer 1

您需要在Masonry实例上调用reloadItems()方法。这将启动DOM重新计算：

http://masonry.desandro.com/methods.html#reloaditems

在AJAX调用之后重新加载Masonry Grid

1 个答案: