Blocksit插件实现瀑布流数据无限( 异步)加载_ BlocksIt 瀑布流插件是基于jquery的，用法也特别简洁，是为数不多的几款动态瀑布流插件之一。 html代码： div width:1000px; overflow:hidden; margin:0 auto div kppcl width:1008px; position:relative id=kppcl div kppcld div kppcld_t div kpica href=#url_reset(activity/detail,id_#$item.id#)#img src=#$item.logo# width=322 /a/div div knamea href=#url_reset(activity/detail,id_#$item.id#)#$item.title#/a/div div 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 kppcld_b/div /div div kppcld div kppcld_t div kpica href=#url_reset(activity/detail,id_#$item.id#)#img src=#$item.logo# width=322 /a/div div knamea href=#url_reset(activity/detail,id_#$item.id#)#$item.title#/a/div div 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 kppcld_b/div /div div kppcld div kppcld_t div kpica href=#url_reset(activity/detail,id_#$item.id#)#img src=#$item.logo# width=322 /a/div div knamea href=#url_reset(activity/detail,id_#$item.id#)#$item.title#/a/div div 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 kppcld_b/div /div /div div id=page display: none div pagesb page_icon上一页/bb1/ba href=?p=22/aa href=?p=2 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: 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 更多信息请查看IT技术专栏 .