javascript - AJAX 调用后重新加载 Masonry Grid

Question

我有一个运行良好的 Masonry Grid。它完美加载并重新调整。但我正在使用一个过滤结果的插件(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