AJAX实现瀑布流触发分页与分页触发瀑布流的方法
所谓的瀑布流效果就正如轻图床首页效果那样，多个内容相近的栏目紧密排列，尽量使到栏目间的间隙最小（即流体布局），并且随着页面滚动条向下滚动，新的数据会追加至当前页面的尾部直到所有数据加载完毕（滚动触发的Ajax翻页）。
瀑布流触发分页
这里说一下思路，虽然下面的实例中不能全都用到：
1.当进入屏幕时，判断内容是否为空，如果不为空，开始初始化数据。
2.当往屏幕下拉时，判断数据的最底部与屏幕高度+滚动的高度的大小。如果最底部小于上面两者之和，重新请求接口，即加载数据。
3.当遇到数据超过某个页数时，停止加载或者用分页的形式显示，点击再显示内容。
varintf_url="http://jb51.net/intf";
varpathUrl="http://jb51.net/";
varpage=1;
varisLoadRB=false;
varul_select=$("#fansList");
varbtn_more=$("#loading");
if(ul_select.length<1)return;
varis_more=true;
//跨域请求接口
functionloadjs(src,callback){
varjs=document.createElement('script');
js.src=src;
js.onreadystatechange=js.onload=function(){
if(!js.readyState||js.readyState=='loaded'
||js.readyState=='complete'){
if(callback){callback()||callback};
}
};
js.charset="utf-8";
document.getElementsByTagName('head')[0].appendChild(js);
}
//回调函数
functionfill(data){
if(data.pageCount==data.pageNo){
is_more=false;//如果数据全部加载完毕，取消加载
$("#loading").html("加载完毕");
}
}
//解析接口
functionqueryIntf(){
varurl=page==1?intf_url+".json":intf_url+"_page"+page+".json";
loadJs(url,callback);
}
functioncallback(){
page++;
}
/*判断是否要加载接口*/
functionneedtoloadRB(){
varbtn_top=btn_more.offset().top;
varwindow_height=$(window).height();
varscroll_Top=$(window).scrollTop();
returnbtn_top<scroll_Top+window_height?true:false;
}
$(window).scroll(function(){
var_needload=needtoloadRB();
if(_needload&&isLoadRB==false&&is_more){isLoadRB=true;queryintf();}
})
window.onload=function(){
queryintf();
}
以上就是比较简单的随着下拉内容不断加载的思路代码。
JSON格式类似于（如果是动态接口，可以通过callback函数，则这里不用加fill()）：
fill({"fans":[{"nickname":"蔡宝坚","website":"jb51.net","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"jb51.net","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"jb51.net","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"jb51.net","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"jb51.net","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"jb51.net","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"jb51.net","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"jb51.net","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"jb51.net","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"jb51.net","youzhi":"2.5","time":"3分钟前"}],"pageCount":2,"pageNo":1,"pageSize":10,"totalSize":20
});
原来静态也可以做接口回调。通过静态处理，则大大缓解了服务器压力和加速生成内容，是大流量网站必备的处理方式。
jQuery的ajax方法实现分页触发瀑布流
1.通过Ajax的方式获取下一页的内容
我们需要网页中具有如下HTML结构的导航，next_link为下一页的url。
<divid="page_nav"> <ahref="next_link">下一页</a> </div>
相应的css
#page_nav{clear:both;text-align:center;}
以下这段代码为通过Ajax的方式获取下一页的内容，并追加到当前内容的末尾。
nextHref=$("#next_pagea").attr("href");
//给浏览器窗口绑定scroll事件
$(window).bind("scroll",function(){
//判断窗口的滚动条是否接近页面底部
if($(document).scrollTop()+$(window).height()>$(document).height()-10){
//判断下一页链接是否为空
if(nextHref!=undefined){
//Ajax翻页
$.ajax({
url:$("#page_nava").attr("href"),
type:"POST",
success:function(data){
result=$(data).find("#thumbs.imgbox");
nextHref=$(data).find("#page_nava").attr("href");
$("#page_nava").attr("href",nextHref);
$("#thumbs").append(result);
}
});
}else{
$("#page_nav").remove();
}
}
});
2.对追加的内容进行流体布局
熟悉jQuery的童鞋应该会了解js对于通过Ajax方式插入到页面中的元素并不起作用，但在这里并不需要作出如使用live()等处理，因为Masonry已经在内部作出类似的处理并且默认起效，因此只需在Ajax成功执行后的回调函数中调用masonry()方法即可。
$newElems=$result;
$newElems.imagesLoaded(function(){
$container.masonry('appended',$newElems,true);
});
3.对Ajax翻页过程作出修饰
在上面的过程中已经有完整的瀑布流布局，但是翻页过程中并没有任何提示，而且直接插入多张图片可能会影响用户体验，因此需要对翻页过程作出一些修饰，下面给出完整代码。
这里需要增加一个如下的元素，用于提示正在加载新内容或提示已到了最后一页。
<divid="page_loading"> <span>给力加载中……</span> </div>
相应的css
#page_loading{display:none;background:#111111;opacity:0.7;height:60px;width:220px; padding:10px;position:absolute;bottom:-50px;left:330px;}