首页 / 脚本样式 / JavaScript / Blocksit插件实现瀑布流数据无限（ 异步）加载

<div style="width:1000px; overflow:hidden; margin:0 auto"><div class="kppcl" style="width:1008px; position:relative" id="kppcl"> <div class="kppcld"><div class="kppcld_t"><div class="kpic"><a href="{#url_reset（"activity/detail","id_{#$item.id#}"）#}"><img src="{#$item.logo#}" width="322" /></a></div><div class="kname"><a href="{#url_reset（"activity/detail","id_{#$item.id#}"）#}">{#$item.title#}</a></div><div class="kinfor"><table width="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><div class="kppcld_b"></div></div> <div class="kppcld"><div class="kppcld_t"><div class="kpic"><a href="{#url_reset（"activity/detail","id_{#$item.id#}"）#}"><img src="{#$item.logo#}" width="322" /></a></div><div class="kname"><a href="{#url_reset（"activity/detail","id_{#$item.id#}"）#}">{#$item.title#}</a></div><div class="kinfor"><table width="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><div class="kppcld_b"></div></div> <div class="kppcld"><div class="kppcld_t"><div class="kpic"><a href="{#url_reset（"activity/detail","id_{#$item.id#}"）#}"><img src="{#$item.logo#}" width="322" /></a></div><div class="kname"><a href="{#url_reset（"activity/detail","id_{#$item.id#}"）#}">{#$item.title#}</a></div><div class="kinfor"><table width="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><div class="kppcld_b"></div></div> </div> <div id="page" style="display: none"><div class="pages"><b class="page_icon">上一页</b><b>1</b><a href="?p=2">2</a><a href="?p=2" class="nextprev" rel="2">下一页</a></div></div> </div>

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