masonry ajax 没用,Jquery Masonry loading over each other after Ajax

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

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.