AJAX实现瀑布流触发分页与分页触发瀑布流的方法

所谓的瀑布流效果就正如轻图床首页效果那样，多个内容相近的栏目紧密排列，尽量使到栏目间的间隙最小（即流体布局），并且随着页面滚动条向下滚动，新的数据会追加至当前页面的尾部直到所有数据加载完毕（滚动触发的 Ajax 翻页）。

瀑布流触发分页

这里说一下思路，虽然下面的实例中不能全都用到：
1.当进入屏幕时，判断内容是否为空，如果不为空，开始初始化数据。
2.当往屏幕下拉时，判断数据的最底部与屏幕高度+滚动的高度的大小。如果最底部小于上面两者之和，重新请求接口，即加载数据。
3.当遇到数据超过某个页数时，停止加载或者用分页的形式显示，点击再显示内容。

var intf_url="http://Vevb.com/intf";var pathUrl = "http://Vevb.com/";var page=1;var isLoadRB=false; var ul_select=$("#fansList");var btn_more=$("#loading");if(ul_select.length <1) return ;var is_more =true;//跨域请求接口function loadjs(src,callback){ var js= 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);}//回调函数function fill(data){if(data.pageCount==data.pageNo){ is_more=false;//如果数据全部加载完毕，取消加载    $("#loading").html("加载完毕");}}//解析接口function queryIntf(){var url=page==1?intf_url+".json":intf_url+"_page"+page+".json";loadJs(url,callback);}function callback(){page++;}/*判断是否要加载接口*/function needtoloadRB(){ var btn_top=btn_more.offset().top; var window_height=$(window).height(); var scroll_Top=$(window).scrollTop(); return btn_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":"Vevb.com","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"Vevb.com","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"Vevb.com","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"Vevb.com","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"Vevb.com","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"Vevb.com","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"Vevb.com","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"Vevb.com","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"Vevb.com","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"Vevb.com","youzhi":"2.5","time":"3分钟前"}],"pageCount":2,"pageNo":1,"pageSize":10,"totalSize":20});