使用Masonry来做瀑布流加载, 但是在ajax中不能够完成,求方法.希望能够ajax中也能够使用imagesloaded来实现加载图片完成之后进行排列.

我的代码
不会贴git代码 直接贴了

html:

<div class="container" id="wall">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
...
</div>

js:
var container = jQuery('#wall');
jQuery("#wall item").imagesLoaded(function(){
container.masonry({
gutter: 28,
itemSelector: '.item',
isAnimated: true
});
});

ajax:

jQuery.getJSON('http://localhost/test.json',function(data){
var tmp;
var l = data.length;
var h = '';
for(var i=0;i<l;i++){
tmp =data[i];
h += '<div class="item"><h5>'+tmp.title+'</h5><img src="'+tmp.image+'" alt=""></div>';
}
jQuery(h).imagesLoaded(function(){
jQuery('#wall').append(jQuery(h)).masonry('appended', jQuery(h), true);
});
})


在第一步加载js的时候是没有问题的,

关键是触发ajax之后添加到后面的DOM就不会再瀑布流式的排列了.

还有如果ajax改成如下

jQuery.getJSON('http://localhost/test.json',function(data){
var tmp;
var l = data.length;
var h = '';
for(var i=0;i<l;i++){
tmp =data[i];
h = '<div class="item"><h5>'+tmp.title+'</h5><img src="'+tmp.image+'" alt=""></div>';
jQuery(h).imagesLoaded(function(){
jQuery('#wall').append(h).masonry('appended', jQuery(h), true);
});
}
});

这样的情况就是只会增加最后一个DOM, 而且前面的会空出来.

求指教.

尝试过 其他 masonry的reloaditems , 这个效果就是把新增加DOM的坐标全部清空.