在AJAX调用后重新加载砌体网格 [英] Reload Masonry Grid after AJAX call

问题描述

我有一个砌体网格，工作精美.它可以完美加载并重新调整.但是我使用的是一个过滤结果的插件(Wordpress的Search& Filter插件)，并使用AJAX来做到这一点.但是在AJAX调用之后，我的砌体网格不再工作.我知道这是由于我需要在AJAX调用后重新加载Masonry，但我并不完全知道该怎么做.有人知道我该怎么做吗?

I have a Masonry Grid that is working beautifully. It loads perfectly and readjusts. But I am using a plugin that filters results (Search & Filter plugin for Wordpress) and uses AJAX to do that. But after the AJAX call, my masonry grid is no longer working. I know it is due to the fact that I need to reload Masonry after the AJAX call, but I don't exactly know how to do that. Does anyone know how I can do that?

这是我的基本HTML结构.

Here is my basic HTML structure.

<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.

.search-results-container is the div that repeats.

我的JS看起来像这样:

My JS looks like this:

    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的方法.有什么想法吗?

That works well until the AJAX is initiated and reloads the container. Then the Masonry calculations are off and everything is out of whack. I need to figure out a way to reload Masonry after the AJAX call. Any ideas?

推荐答案

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

You will want to call the reloadItems() method on your Masonry instance. This will kick off the DOM recalculations:

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

这篇关于在AJAX调用后重新加载砌体网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！