Blocksit插件實(shí)現(xiàn)瀑布流數(shù)據(jù)無(wú)限( 異步)加載
更新時(shí)間:2014年06月20日 11:09:20 投稿:hebedich
BlocksIt 瀑布流插件是基于jquery的,使用也非常簡(jiǎn)單,是為數(shù)不多的幾款動(dòng)態(tài)瀑布流插件之一。
html代碼:
<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>時(shí) 間:</th> <td>{#$item.start_date#}-{#$item.end_date#}</td> </tr> <tr> <th>地 點(diǎn):</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>時(shí) 間:</th> <td>{#$item.start_date#}-{#$item.end_date#}</td> </tr> <tr> <th>地 點(diǎn):</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>時(shí) 間:</th> <td>{#$item.start_date#}-{#$item.end_date#}</td> </tr> <tr> <th>地 點(diǎn):</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">上一頁(yè)</b><b>1</b><a href="?p=2">2</a><a href="?p=2" class="nextprev" rel="2">下一頁(yè)</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; //滾動(dòng) $(window).scroll(function(){ // 當(dāng)滾動(dòng)到最底部以上100像素時(shí), 加載新內(nèi)容 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>
您可能感興趣的文章:
- EASYUI TREEGRID異步加載數(shù)據(jù)實(shí)現(xiàn)方法
- struts2+jquery+json實(shí)現(xiàn)異步加載數(shù)據(jù)(自寫(xiě))
- 瀏覽器窗口滾動(dòng)加載數(shù)據(jù)采用異步形式從后臺(tái)加載數(shù)據(jù)
- asp.net 使用js分頁(yè)實(shí)現(xiàn)異步加載數(shù)據(jù)
- 自寫(xiě)的jQuery異步加載數(shù)據(jù)添加事件
- jQuery異步加載數(shù)據(jù)并添加事件示例
- 如何使用PHP+jQuery+MySQL實(shí)現(xiàn)異步加載ECharts地圖數(shù)據(jù)(附源碼下載)
相關(guān)文章
常見(jiàn)JS效果之圖片減速度滾動(dòng)實(shí)現(xiàn)代碼
圖片減速度滾動(dòng),一般用于產(chǎn)品的展示效果。作為前端,互聯(lián)網(wǎng)上一些常見(jiàn)效果都要嘗試去實(shí)現(xiàn),不能因?yàn)楣居貌坏骄筒蛔觥?/div> 2011-12-12發(fā)一個(gè)自己用JS寫(xiě)的實(shí)用看圖工具實(shí)現(xiàn)代碼
所以決定慢慢來(lái)照顧一下博客吧,這里先把眼前就有的一個(gè)小東西拿出來(lái)和大家分享一下,這是2006年的時(shí)候(文本里記下了時(shí)間,不然也忘記了)為了自己看網(wǎng)絡(luò)圖片方便而寫(xiě)的。2008-07-07html+js+highcharts繪制圓餅圖表的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇html+js+highcharts繪制圓餅圖表的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08javascript 火狐(firefox)不顯示本地圖片問(wèn)題解決
在Firefox一直不能用js做出圖片預(yù)覽的效果,下面這個(gè)即可解決,用替換的方法實(shí)現(xiàn)firefox支持得的路徑格式2008-07-07推薦自用 Javascript 縮圖函數(shù) (onDOMLoaded)……
推薦自用 Javascript 縮圖函數(shù) (onDOMLoaded)……...2007-10-10用javascript實(shí)現(xiàn)的圖片馬賽克后顯示并切換加文字功能
用javascript實(shí)現(xiàn)的圖片馬賽克后顯示并切換加文字功能...2007-04-04最新評(píng)論