Reload Masonry Grid after AJAX call
<p>I have a Masonry Grid that is working beautifully. It loads perfectly and readjusts. But I am using a plugin that filters results (Search &amp; 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? </p>

<p>Here is my basic HTML structure. </p>

<pre><code>&lt;div id="masonry-container&gt;
     &lt;div id="search-results-container" class="masonry-brick"&gt;
       &lt;h2&gt;Title&lt;/h2&gt;
       &lt;img src="myimage.jpg"&gt;
       &lt;p&gt;Content&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>.search-results-container is the div that repeats. </p>

<p>My JS looks like this:</p>

<pre><code>    jQuery(window).load(function() {


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

});
</code></pre>

<p>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?</p>