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

html代码：

<div><div><div><div><div><a href='{#url_reset("activity/detail","id_{#$item.id#}")#}'><img src="{#$item.logo#}" /></a></div><div><a href='{#url_reset("activity/detail","id_{#$item.id#}")#}'>{#$item.title#}</a></div><div><table cellspacing="0" cellpadding="0"><tr><th>时    间：</th><td>{#$item.start_date#}-{#$item.end_date#}</td></tr><tr><th>地    点：</th><td>{#$item.area_name#}</td></tr></table></div></div><div></div></div><div><div><div><a href='{#url_reset("activity/detail","id_{#$item.id#}")#}'><img src="{#$item.logo#}" /></a></div><div><a href='{#url_reset("activity/detail","id_{#$item.id#}")#}'>{#$item.title#}</a></div><div><table cellspacing="0" cellpadding="0"><tr><th>时    间：</th><td>{#$item.start_date#}-{#$item.end_date#}</td></tr><tr><th>地    点：</th><td>{#$item.area_name#}</td></tr></table></div></div><div></div></div><div><div><div><a href='{#url_reset("activity/detail","id_{#$item.id#}")#}'><img src="{#$item.logo#}" /></a></div><div><a href='{#url_reset("activity/detail","id_{#$item.id#}")#}'>{#$item.title#}</a></div><div><table cellspacing="0" cellpadding="0"><tr><th>时    间：</th><td>{#$item.start_date#}-{#$item.end_date#}</td></tr><tr><th>地    点：</th><td>{#$item.area_name#}</td></tr></table></div></div><div></div></div></div><div><div><b>上一页</b><b>1</b><a href="?p=2">2</a><a href="?p=2">下一页</a></div> </div></div>

js代码

<script src="/js/blocksit.min.js"></script><script language="javascript" type="text/javascript"> $(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);}}}});} }</script>