当前位置:Gxlcms > JavaScript > AJAX实现瀑布流触发分页与分页触发瀑布流的方法

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

时间:2021-07-01 10:21:17 帮助过:3人阅读

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

瀑布流触发分页

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

  1. var intf_url="http://jb51.net/intf";
  2. var pathUrl = "http://jb51.net/";
  3. var page=1;
  4. var isLoadRB=false;
  5. var ul_select=$("#fansList");
  6. var btn_more=$("#loading");
  7. if(ul_select.length <1) return ;
  8. var is_more =true;
  9. //跨域请求接口
  10. function loadjs(src,callback){
  11. var js= document.createElement('script');
  12. js.src = src;
  13. js.onreadystatechange = js.onload =function(){
  14. if(!js.readyState || js.readyState=='loaded'
  15. || js.readyState=='complete'){
  16. if(callback){callback()||callback};
  17. }
  18. };
  19. js.charset="utf-8";
  20. document.getElementsByTagName('head')[0].appendChild(js);
  21. }
  22. //回调函数
  23. function fill(data){
  24. if(data.pageCount==data.pageNo){
  25. is_more=false;//如果数据全部加载完毕,取消加载
  26. $("#loading").html("加载完毕");
  27. }
  28. }
  29. //解析接口
  30. function queryIntf(){
  31. var url=page==1?intf_url+".json":intf_url+"_page"+page+".json";
  32. loadJs(url,callback);
  33. }
  34. function callback(){
  35. page++;
  36. }
  37. /*判断是否要加载接口*/
  38. function needtoloadRB(){
  39. var btn_top=btn_more.offset().top;
  40. var window_height=$(window).height();
  41. var scroll_Top=$(window).scrollTop();
  42. return btn_top<scroll_Top+window_height?true:false;
  43. }
  44. $(window).scroll(function(){
  45. var _needload=needtoloadRB();
  46. if(_needload && isLoadRB==false &&is_more){isLoadRB=true;queryintf();}
  47. })
  48. window.onload = function(){
  49. queryintf();
  50. }

以上就是比较简单的随着下拉内容不断加载的思路代码。

JSON格式类似于(如果是动态接口,可以通过callback函数,则这里不用加fill()):

  1. 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
  2. });

原来静态也可以做接口回调。通过静态处理,则大大缓解了服务器压力和加速生成内容,是大流量网站必备的处理方式。

jQuery的ajax方法实现分页触发瀑布流

1.通过 Ajax 的方式获取下一页的内容
我们需要网页中具有如下 HTML 结构的导航, next_link 为下一页的 url。

  1. <div id="page_nav">
  2. <a href="next_link">下一页</a>
  3. </div>

相应的 css

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

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

  1. nextHref = $("#next_page a").attr("href");
  2. // 给浏览器窗口绑定 scroll 事件
  3. $(window).bind("scroll",function(){
  4. // 判断窗口的滚动条是否接近页面底部
  5. if( $(document).scrollTop() + $(window).height() > $(document).height() - 10 ) {
  6. // 判断下一页链接是否为空
  7. if( nextHref != undefined ) {
  8. // Ajax 翻页
  9. $.ajax( {
  10. url: $("#page_nav a").attr("href"),
  11. type: "POST",
  12. success: function(data) {
  13. result = $(data).find("#thumbs .imgbox");
  14. nextHref = $(data).find("#page_nav a").attr("href");
  15. $("#page_nav a").attr("href", nextHref);
  16. $("#thumbs").append(result);
  17. }
  18. });
  19. } else {
  20. $("#page_nav").remove();
  21. }
  22. }
  23. });

2.对追加的内容进行流体布局
熟悉 jQuery 的童鞋应该会了解 js 对于通过 Ajax 方式插入到页面中的元素并不起作用,但在这里并不需要作出如使用 live() 等处理,因为 Masonry 已经在内部作出类似的处理并且默认起效,因此只需在 Ajax 成功执行后的回调函数中调用 masonry() 方法即可。

  1. $newElems = $result;
  2. $newElems.imagesLoaded(function(){
  3. $container.masonry( 'appended', $newElems, true );
  4. });

3.对 Ajax 翻页过程作出修饰
在上面的过程中已经有完整的瀑布流布局,但是翻页过程中并没有任何提示,而且直接插入多张图片可能会影响用户体验,因此需要对翻页过程作出一些修饰,下面给出完整代码。
这里需要增加一个如下的元素,用于提示正在加载新内容或提示已到了最后一页。

  1. <div id="page_loading">
  2. <span>给力加载中……</span>
  3. </div>

相应的 css

代码如下:
#page_loading {display: none; background: #111111; opacity: 0.7; height: 60px; width: 220px;  padding: 10px; position: absolute; bottom: -50px; left: 330px; }


下面是完整的 Ajax 翻页代码

  1. nextHref = $("#next_page a").attr("href");
  2. // 给浏览器窗口绑定 scroll 事件
  3. $(window).bind("scroll",function(){
  4. // 判断窗口的滚动条是否接近页面底部
  5. if( $(document).scrollTop() + $(window).height() > $(document).height() - 10 ) {
  6. // 判断下一页链接是否为空
  7. if( nextHref != undefined ) {
  8. // 显示正在加载模块
  9. $("#page_loading").show("slow");
  10. // Ajax 翻页
  11. $.ajax( {
  12. url: $("#page_nav a").attr("href"),
  13. type: "POST",
  14. success: function(data) {
  15. result = $(data).find("#thumbs .imgbox");
  16. nextHref = $(data).find("#page_nav a").attr("href");
  17. $("#page_nav a").attr("href", nextHref);
  18. $("#thumbs").append(result);
  19. // 把新的内容设置为透明
  20. $newElems = result.css({ opacity: 0 });
  21. $newElems.imagesLoaded(function(){
  22. $container.masonry( 'appended', $newElems, true );
  23. // 渐显新的内容
  24. $newElems.animate({ opacity: 1 });
  25. // 隐藏正在加载模块
  26. $("#page_loading").hide("slow");
  27. });
  28. }
  29. });
  30. } else {
  31. $("#page_loading span").text("木有了噢,最后一页了!");
  32. $("#page_loading").show("fast");
  33. setTimeout("$('#page_loading').hide()",1000);
  34. setTimeout("$('#page_loading').remove()",1100);
  35. }
  36. }
  37. });

人气教程排行