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

所谓的瀑布流效果就正如轻图床首页效果那样，多个内容相近的栏目紧密排列，尽量使到栏目间的间隙最小（即流体布局），并且随着页面滚动条向下滚动，新的数据会追加至当前页面的尾部直到所有数据加载完毕（滚动触发的 Ajax 翻页）。
瀑布流触发分页
这里说一下思路，虽然下面的实例中不能全都用到：
1.当进入屏幕时，判断内容是否为空，如果不为空，开始初始化数据。
2.当往屏幕下拉时，判断数据的最底部与屏幕高度+滚动的高度的大小。如果最底部小于上面两者之和，重新请求接口，即加载数据。
3.当遇到数据超过某个页数时，停止加载或者用分页的形式显示，点击再显示内容。

var intf_url="http://jb51.net/intf";var pathUrl = "http://jb51.net/";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":"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。

<div id="page_nav"><a href="next_link">下一页</a></div>

相应的 css

#page_nav {clear: both; text-align: center; }

以下这段代码为通过 Ajax 的方式获取下一页的内容，并追加到当前内容的末尾。

nextHref = $（"#next_page a"）.attr（"href"）;// 给浏览器窗口绑定 scroll 事件$（window）.bind（"scroll",function（）{// 判断窗口的滚动条是否接近页面底部if（ $（document）.scrollTop（） + $（window）.height（） > $（document）.height（） - 10 ） {// 判断下一页链接是否为空if（ nextHref ！= undefined ） {// Ajax 翻页$.ajax（ {url: $（"#page_nav a"）.attr（"href"）,type: "POST",success: function（data） {result = $（data）.find（"#thumbs .imgbox"）;nextHref = $（data）.find（"#page_nav a"）.attr（"href"）;$（"#page_nav a"）.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 翻页过程作出修饰
在上面的过程中已经有完整的瀑布流布局，但是翻页过程中并没有任何提示，而且直接插入多张图片可能会影响用户体验，因此需要对翻页过程作出一些修饰，下面给出完整代码。
这里需要增加一个如下的元素，用于提示正在加载新内容或提示已到了最后一页。

<div id="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; }

下面是完整的 Ajax 翻页代码

nextHref = $（"#next_page a"）.attr（"href"）;// 给浏览器窗口绑定 scroll 事件$（window）.bind（"scroll",function（）{// 判断窗口的滚动条是否接近页面底部if（ $（document）.scrollTop（） + $（window）.height（） > $（document）.height（） - 10 ） {// 判断下一页链接是否为空if（ nextHref ！= undefined ） {// 显示正在加载模块$（"#page_loading"）.show（"slow"）;// Ajax 翻页$.ajax（ {url: $（"#page_nav a"）.attr（"href"）,type: "POST",success: function（data） {result = $（data）.find（"#thumbs .imgbox"）;nextHref = $（data）.find（"#page_nav a"）.attr（"href"）;$（"#page_nav a"）.attr（"href", nextHref）;$（"#thumbs"）.append（result）;// 把新的内容设置为透明$newElems = result.css（{ opacity: 0 }）;$newElems.imagesLoaded（function（）{$container.masonry（ "appended", $newElems, true ）;// 渐显新的内容$newElems.animate（{ opacity: 1 }）;// 隐藏正在加载模块$（"#page_loading"）.hide（"slow"）;}）; }}）;} else {$（"#page_loading span"）.text（"木有了噢，最后一页了！"）;$（"#page_loading"）.show（"fast"）;setTimeout（"$（"#page_loading"）.hide（）",1000）;setTimeout（"$（"#page_loading"）.remove（）",1100）;}}}）;