《Blocksit插件实现瀑布流数据无限( 异步)加载_》由会员分享，可在线阅读，更多相关《Blocksit插件实现瀑布流数据无限( 异步)加载_（7页珍藏版）》请在金锄头文库上搜索。
1、Blocksit插件实现瀑布流数据无限( 异步)加载_ BlocksIt 瀑布流插件是基于jquery的，用法也特别简洁，是为数不多的几款动态瀑布流插件之一。 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=kpica href=#url_reset(activity/detail,id_#$item.
2、id#)#img src=#$item.logo# width=322 /a/div div class=knamea 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 /tabl
3、e /div /div div class=kppcld_b/div /div div class=kppcld div class=kppcld_t div class=kpica href=#url_reset(activity/detail,id_#$item.id#)#img src=#$item.logo# width=322 /a/div div class=knamea href=#url_reset(activity/detail,id_#$item.id#)#$item.title#/a/div div class=kinfor table width=100% border
4、=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=kpica href=#url_reset(activity/detail,id_#$item.id#)#img src=#$item.logo# width=
5、322 /a/div div class=knamea 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/d
6、iv /div /div div id=page style=display: none div class=pagesb class=page_icon上一页/bb1/ba href=?p=22/aa href=?p=2 class=nextprev rel=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:
7、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 != curren
8、t_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 更多信息请查看IT技术专栏 .
