这是一个创建于 4139 天前的主题,其中的信息可能已经有所发展或是发生改变。
我的代码
不会贴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的坐标全部清空.
6 条回复 • 1970-01-01 08:00:00 +08:00
|
|
1
justfindu 2013-08-23 16:29:41 +08:00
是因为不贴git 所以没人看么- -
|
|
|
2
dexbol 2013-08-23 17:57:59 +08:00 1
|
|
|
3
Gawie 2013-08-23 18:07:52 +08:00 1
没有配合infinitescroll 么
|
|
|
4
justfindu 2013-08-26 08:47:25 +08:00
@ Gawie 没尝试~ 我看过示例~ 我是绑定按钮~ 跟Masonry示例上的~ 我去搞搞
|
|
|
5
ghbjy1128 2013-08-26 10:20:37 +08:00
如果没有不需要考虑IE8的话,使用naturalHeight and naturalWidth最方便
|