Jquery Masonry loading over each other after Ajax div refresh

Question

I am using ajax to refresh a div containing images. I use masonry to add layout initially.

Then the ajax call returns a js that refreshes the div using the html() method. Now after it completes I am calling masonry('reloadItems'). 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.

JS:

$('#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');
 });

OKay the response of this ajax request is:

$('#images_container').html('<%= escape_javascript(render("shared/random_issues")) %>');

So I am not appending the images. I am replacing the container to be precise.

This is actually 10 images loaded on each other.

EDIT: See http://stackoverflow.com/questions/17697223/masonry-images-overlapping-above-each-other/17697495?noredirect=1#17697495 for css and html.

Answer 1

Okay I seemed to have solved the problem.

I obtained the masonry object by using:

var masonry = $('#issue_container').data('masonry');

Now using this method I called reloadItems() and then layout(). After first method call every item overlaps onto each other in one tile and then after calling layout() a nice masonry layout is formed. The animation of moving from top-left corner into a nice layout also seems nice :D.

Answer 2

I resolved a similar issue just now. I had an outer div (enclosing the masonry container) that was set to {display: none} in CSS, and then made visible later on using $('#...').show(); I had the same issue. When the div + container is first made visible all the elements overlap. Then when the window is re-sized it's redrawn properly.

The issue seemed to be that when the elements are first created, the size of the div is zero (cause of the display:none setting), and when the Div is displayed (.show();) the elements are already rendered for a zero height container. Hence the overlap.

I fixed this by preventing the layout from being initialized till it's made visible

$myContainer = $('#myTiles');
$myContainer.masonry({
    itemSelector: '.myTile',
    isInitLayout: false
});

and then calling layout later on (in my case on a button click) using

$myContainer.masonry();

I checked your code, and couldn't replicate the issue on my side using your css / script settings... but thought I'd share my solution in case it helps.