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


Posted in Javascript onMay 23, 2016

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

瀑布流触发分页

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

var intf_url="http://3water.com/intf";
var pathUrl = "http://3water.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":"3water.com","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"3water.com","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"3water.com","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"3water.com","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"3water.com","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"3water.com","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"3water.com","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"3water.com","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"3water.com","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"3water.com","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);
    }
  }
});
Javascript 相关文章推荐
ASP SQL防注入的方法
Dec 25 Javascript
跟着Jquery API学Jquery之一 选择器
Apr 07 Javascript
JS 面向对象之神奇的prototype
Feb 26 Javascript
js调用后台、后台调用前台等方法总结
Apr 17 Javascript
ECMAScript6的新特性箭头函数(Arrow Function)详细介绍
Jun 07 Javascript
JS 使用for循环遍历子节点查找元素
Sep 06 Javascript
使用javascript实现雪花飘落的效果
Jan 13 Javascript
jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法
Nov 27 Javascript
浅谈JS中json数据的处理
Jun 30 Javascript
详解如何探测小程序返回到webview页面
May 14 Javascript
JS中自定义事件的使用与触发操作实例分析
Nov 01 Javascript
基于openlayers实现角度测量功能
Sep 28 Javascript
jQuery Mobile中的button按钮组件基础使用教程
May 23 #Javascript
jQuery实现页面评论栏中访客信息自动填写功能的方法
May 23 #Javascript
jQuery插件formValidator实现表单验证
May 23 #Javascript
超链接怎么正确调用javascript函数
May 23 #Javascript
以WordPress为例讲解jQuery美化页面Title的方法
May 23 #Javascript
jQuery中选择器的基础使用教程
May 23 #Javascript
基于BootStrap的图片轮播效果展示实例代码
May 23 #Javascript
You might like
模板引擎smarty工作原理以及使用示例
2014/05/25 PHP
destoon二次开发入门示例
2014/06/20 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十六)
2014/06/30 PHP
完美实现wordpress禁止文章修订和自动保存的方法
2014/11/03 PHP
Js的MessageBox
2006/12/03 Javascript
ImageFlow可鼠标控制图片滚动
2008/01/30 Javascript
学习ExtJS table布局
2009/10/08 Javascript
学习面向对象之面向对象的术语
2010/11/30 Javascript
灵活应用js调试技巧解决样式问题的步骤分享
2012/03/15 Javascript
疯狂Jquery第一天(Jquery学习笔记)
2012/05/11 Javascript
js multiple全选与取消全选实现代码
2012/12/04 Javascript
jquery.cookie() 方法的使用(读取、写入、删除)
2013/12/05 Javascript
JavaScript实现模仿桌面窗口的方法
2015/07/18 Javascript
jQuery数据类型小结(14个)
2016/01/08 Javascript
JS交互点击WKWebView中的图片实现预览效果
2018/01/05 Javascript
12条写出高质量JS代码的方法
2018/01/07 Javascript
Bootstrap模态对话框用法简单示例
2018/08/31 Javascript
卸载vue2.0并升级vue_cli3.0的实例讲解
2020/02/16 Javascript
[01:48]帕吉至宝加入游戏,遗迹战场现“千劫神屠”
2018/04/07 DOTA
基于Python实现通过微信搜索功能查看谁把你删除了
2016/01/27 Python
Pycharm远程调试openstack的方法
2017/11/21 Python
PyQt5 pyqt多线程操作入门
2018/05/05 Python
python判断计算机是否有网络连接的实例
2018/12/15 Python
西尔斯百货官网:Sears
2016/09/06 全球购物
用C语言实现文件读写操作
2013/10/27 面试题
物业公司采购员岗位职责
2013/12/31 职场文书
小学美术教学反思
2014/02/01 职场文书
十八届三中全会个人学习材料
2014/02/13 职场文书
护理专业学生职业生涯规划范文
2014/03/11 职场文书
文秘个人求职信范文
2014/04/22 职场文书
2014年大学班长工作总结
2014/11/14 职场文书
幼儿园六一儿童节演讲稿
2015/03/19 职场文书
2015暑期社会实践调查报告
2015/07/14 职场文书
JS继承最简单的理解方式
2021/03/31 Javascript
详解vue中v-for的key唯一性
2021/05/15 Vue.js
集英社今正式宣布 成立游戏公司“集英社Games”
2022/03/31 其他游戏