mysql瀑布流布局插件_Blocksit插件实现瀑布流数据无限( 异步)加载

html代码：

{#$item.title#}

时    间：	{#$item.start_date#}-{#$item.end_date#}
地    点：	{#$item.area_name#}

{#$item.title#}

时    间：	{#$item.start_date#}-{#$item.end_date#}
地    点：	{#$item.area_name#}

{#$item.title#}

时    间：	{#$item.start_date#}-{#$item.end_date#}
地    点：	{#$item.area_name#}

上一页 1 2 下一页

js代码

$(window).load( function() {

$('#kppcl').BlocksIt({

numOfCol: 3,

offsetX: 5,

offsetY: 5

});

});

var current_p = 0;

//滚动

$(window).scroll(function(){

// 当滚动到最底部以上100像素时， 加载新内容

if ($(document).height() - $(this).scrollTop() - $(this).height()<100) {

ajax_load_data();

}

});

function ajax_load_data(){

var next_p = $('#page').find('.nextprev').attr('rel');

if(next_p && next_p != current_p){

console.log('nextpage = '+next_p);

current_p = next_p;

$.ajax({

url:'{#url_reset("request/front/ajax","","php")#}',

data:{'act':'ajax_forum','p':next_p},

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){

$('#kppcl').append(data.html).BlocksIt('reload');

}

if(data.pages_str){

$('#page').html(data.pages_str);

}

}

}

});

}

}