title: Reload Masonry Grid after AJAX call
body: <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>