title: How do I use jQuery Masonry reload?
body: <p>The script below fades out tiles in the page that do not match the users input. That part is working great, but I need Masonry to realign the tiles after they fadeOut. </p>
  
  <p><img src="https://i.stack.imgur.com/TcQA6.jpg" alt="enter image description here"></p>
  
  <p>html- </p>
  
  <pre><code>&lt;article class='tile'&gt;
  &lt;p class='img' style="background-image:url(images/pic_aaronb.jpg)"&gt;&lt;/p&gt;
  &lt;h3&gt;Tony B&lt;/h3&gt;
  &lt;h2 class='tags'&gt;Tony tony&lt;/h2&gt;
  
  &lt;span&gt;&lt;a href='#'&gt;Facebook&lt;/a&gt; &amp;bull; &lt;a href='#'&gt;Twitter&lt;/a&gt; &lt;/span&gt;
  &lt;p&gt;Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non  mauris vitae erat consequat auctor eu in elit. Class aptent taciti &lt;/p&gt;
  &lt;/article&gt;
  </code></pre>
  
  <p>Script-</p>
  
  <pre><code>$("#b_submit").click(function() {
  
  
          var filter_text = $('input:text').val();
  
  
  
          console.log(this);
  
      $('.tags:not(.tags:contains('+filter_text+'))').parent().fadeOut('slow');
  
  
  
          //alert(filter_text);
  
          var $wrapper = $('#wrapper');
          var $back = $('#b_reset');
  
  
          $('#b_reset').fadeIn();
  
          $wrapper.prepend( $back ).masonry( 'reload' );
  
  
          $( ".tile" ).promise().done(function() {
          $( "wrapper" ).masonry( " reload " );
  
        });
  
  
      /*var $back = $('&lt;a href="#" id="b_reset" class="tile"&gt;Back&lt;/a&gt;');
      $('#wrapper').prepend( $back ).masonry( 'reload' );
      */
  
      });
  </code></pre>