jQuery.lazyload+masonry改良图片瀑布流代码
实现方法如下：（这里只发jquery了，相关html代码请各位自己脑补一下吧，我就不发了，哈哈）
/**
*自动刷新
*@type{*|jQuery|HTMLElement}
*/
var$container=$('#main');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector:'.item',
columnWidth:205,
gutterWidth:10,
isAnimated:true
});
});
varpre_href;
//滚动
$(window).scroll(function(){
//当滚动到最底部以上100像素时，加载新内容
if($(document).height()-$(this).scrollTop()-$(this).height()<100){
ajax_load_data();
}
});
functionajax_load_data(){
varhref=$('#page-nav').find('.nextprev').attr('href');
if(href&&href!=pre_href){
console.log('href='+href);
pre_href=href;
$.ajax({
url:href,//获取元素列表的地址
data:{'act':'ajax_wap_index'},
dataType:'json',
type:'post',
beforeSend:function(){
show_loading_body();
},
complete:function(){
show_loading_body();
},
success:function(data){
if(data.status!=undefined&&data.status=='ok'){
if(data.html){
var$boxes=$(data.html);
$container.append($boxes).masonry("appended",$boxes,true);//追加元素
$container.imagesLoaded(function(){
$container.masonry();
});//加载完图片后，会实现自动重新排列。【这里是重点】
}
if(data.str_pages){
$('#page-nav').html(data.str_pages);//设置下一个分页的地址。【可以自己补充】
}
}
}
});
}
}