jQuery.Lazyload+masonry改良画像滝ストリームコード
1880 ワード
実现方法は以下の通りです:(ここではjqueryしか出していません.htmlコードについては、皆さん自分で考えてください.私は出しません.ハハ)
/**
*
* @type {*|jQuery|HTMLElement}
*/
var $container = $('#main');
$container.imagesLoaded( function(){
$container.masonry({
itemSelector : '.item',
columnWidth:205,
gutterWidth:10,
isAnimated: true
});
});
var pre_href;
//
$(window).scroll(function(){
// 100 ,
if ($(document).height() - $(this).scrollTop() - $(this).height()<100) {
ajax_load_data();
}
});
function ajax_load_data(){
var href = $('#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);// 。【 】
}
}
}
});
}
}