Blocksit插件实现瀑布流数据无限( 异步)加载
html代码：
<divstyle="width:1000px;overflow:hidden;margin:0auto">
<divclass="kppcl"style="width:1008px;position:relative"id="kppcl">
<divclass="kppcld">
<divclass="kppcld_t">
<divclass="kpic"><ahref='{#url_reset("activity/detail","id_{#$item.id#}")#}'><imgsrc="{#$item.logo#}"width="322"/></a></div>
<divclass="kname"><ahref='{#url_reset("activity/detail","id_{#$item.id#}")#}'>{#$item.title#}</a></div>
<divclass="kinfor">
<tablewidth="100%"border="0"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>
<divclass="kppcld_b"></div>
</div>
<divclass="kppcld">
<divclass="kppcld_t">
<divclass="kpic"><ahref='{#url_reset("activity/detail","id_{#$item.id#}")#}'><imgsrc="{#$item.logo#}"width="322"/></a></div>
<divclass="kname"><ahref='{#url_reset("activity/detail","id_{#$item.id#}")#}'>{#$item.title#}</a></div>
<divclass="kinfor">
<tablewidth="100%"border="0"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>
<divclass="kppcld_b"></div>
</div>
<divclass="kppcld">
<divclass="kppcld_t">
<divclass="kpic"><ahref='{#url_reset("activity/detail","id_{#$item.id#}")#}'><imgsrc="{#$item.logo#}"width="322"/></a></div>
<divclass="kname"><ahref='{#url_reset("activity/detail","id_{#$item.id#}")#}'>{#$item.title#}</a></div>
<divclass="kinfor">
<tablewidth="100%"border="0"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>
<divclass="kppcld_b"></div>
</div>
</div>
<divid="page"style="display:none">
<divclass="pages"><bclass="page_icon">上一页</b><b>1</b><ahref="?p=2">2</a><ahref="?p=2"class="nextprev"rel="2">下一页</a></div>
</div>
</div>
js代码
<scriptsrc="/js/blocksit.min.js"></script>
<scriptlanguage="javascript"type="text/javascript">
$(window).load(function(){
$('#kppcl').BlocksIt({
numOfCol:3,
offsetX:5,
offsetY:5
});
});
varcurrent_p=0;
//滚动
$(window).scroll(function(){
//当滚动到最底部以上100像素时，加载新内容
if($(document).height()-$(this).scrollTop()-$(this).height()<100){
ajax_load_data();
}
});
functionajax_load_data(){
varnext_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>