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

[justfindu]

我的代码
不会贴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的坐标全部清空.

[justfindu]

是因为不贴git 所以没人看么- -

[dexbol]

@justfindu 应该是。

[Gawie]

没有配合infinitescroll 么

[justfindu]

@Gawie 没尝试~ 我看过示例~ 我是绑定按钮~ 跟Masonry示例上的~ 我去搞搞

[ghbjy1128]

如果没有不需要考虑IE8的话，使用naturalHeight and naturalWidth最方便

[justfindu]

@ghbjy1128 要是不考虑IE的话 这件事就变成简单多了~ 可是~ 哎~