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

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

2、。 var intf_url=l(加载完毕); /解析接口 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).scrollT

3、op(); return btn_topscroll_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(f

4、ans:nickname:蔡宝坚,website:,youzhi:2.5,time:3分钟前,nickname:蔡宝坚,website:,youzhi:2.5,time:3分钟前,nickname:蔡宝坚,website:,youzhi:2.5,time:3分钟前,nickname:蔡宝坚,website:,youzhi:2.5,time:3分钟前,nickname:蔡宝坚,website:,youzhi:2.5,time:3分钟前,nickname:蔡宝坚,website:,youzhi:2.5,time:3分钟前,nickname:蔡宝坚,website:,youzhi:2.5,time:

5、3分钟前,nickname:蔡宝坚,website:,youzhi:2.5,time:3分钟前,nickname:蔡宝坚,website:,youzhi:2.5,time:3分钟前,nickname:蔡宝坚,website:,youzhi:2.5,time:3分钟前,pageCount:2,pageNo:1,pageSize:10,totalSize:20 ); 原来静态也可以做接口回调。通过静态处理，则大大缓解了服务器压力和加速生成内容，是大流量网站必备的处理方式。 jQuery的ajax方法实现分页触发瀑布流 1.通过 Ajax 的方式猎取下一页的内容 我们需要网页中具有如下 HTML 结

6、构的导航， 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()

7、 + $(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, nextHre

8、f); $(#thumbs).append(result); ); else $(#page_nav).remove(); ); 2.对追加的内容进行流体布局 熟识 jQuery 的童鞋应当会了解 js 对于通过 Ajax 方式插入到页面中的元素并不起作用，但在这里并不需要作出如用法 live() 等处理，由于 Masonry 已经在内部作出类似的处理并且默认起效，因此只需在 Ajax 胜利执行后的回调函数中调用 masonry() 方法即可。 $newElems = $result; $newElems.imagesLoaded(function() $container.masonry(

9、appended, $newElems, true ); ); 3.对 Ajax 翻页过程作出修饰 在上面的过程中已经有完整的瀑布流布局，但是翻页过程中并没有任何提示，而且挺直插入多张图片可能会影响用户体验，因此需要对翻页过程作出一些修饰，下面给出完整代码。 这里需要增加一个如下的元素，用于提示正在加载新内容或提示已到了最终一页。 div id=page_loading span给力加载中/span /div 相应的 css 代码如下: #page_loading display: none; background: #111111; opacity: 0.7; height: 60px; w

10、idth: 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(

11、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)