title: Jquery Masonry loading over each other after Ajax div refresh
body: <p>I am using ajax to refresh a div containing images. I use masonry to add layout initially.</p>
  
  <p>Then the ajax call returns a js that refreshes the div using the html() method. Now after it completes I am calling <code>masonry('reloadItems')</code>. But masonry loads all images onto one another. After a page resize it works. I tried manually triggering the page resize but it doesnt make masonry make the adjustments.</p>
  
  <p>JS:</p>
  
  <pre><code>$('#timerange-select, #category_select').bind('change', function() {
      form=$('#images-filter-form');
      $.get(form.action, form.serialize(),function(){
        var $container = $('#images_container');
        $container.imagesLoaded(function(){$container.masonry('reloadItems');});
        $(window).trigger('resize');
      }, 'script');
   });
  </code></pre>
  
  <p>OKay the response of this ajax request is:</p>
  
  <pre><code>$('#images_container').html('&lt;%= escape_javascript(render("shared/random_issues")) %&gt;');
  </code></pre>
  
  <p>So I am not appending the images. I am replacing the container to be precise.
  <img src="https://i.stack.imgur.com/4SOen.png" alt="enter image description here"></p>
  
  <p>This is actually 10 images loaded on each other.</p>
  
  <p>EDIT: See <code>http://stackoverflow.com/questions/17697223/masonry-images-overlapping-above-each-other/17697495?noredirect=1#17697495</code> for css and html.</p>