Ajax电话后，重新加载砌体网格

Question

我有一个砌体网格工作得很好。它可以完美地加载并重新调整。但是我正在使用一个插件来过滤结果（WordPress搜索＆amp; filter插件），并使用Ajax来执行此操作。但是在Ajax呼叫之后，我的砌体网格不再起作用。我知道这是由于我需要在Ajax呼叫后重新加载砌体，但我不确定该怎么做。有人知道我该怎么做吗？

这是我的基本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呼叫后，我需要找出一种重新加载砌体的方法。有什么想法吗？

Answer 1

您将需要在砌体实例上调用reloadItems()方法。这将开始重新计算：

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