一、前言

现在有很多网站都有这样的交互

1、当你往下浏览页面时,页面会自动去异步加载数据。

无限分页效果 infinite scroll 效果图 –ifxoxo.com

2、在页面下方有一个“点击加载”的按钮,点击之后页面会去加载数据。

无限分页效-infinite scroll 点击加载效果图 –ifxoxo.com

虽说这样的操作用js并不难实现,但是现在有很多成熟的插件,很好很强大,让你可以很简单的就实现这样的功能。
这篇文章就是要介绍其中的一种jquery插件–Infinite Scroll, 用它来实现无限分页。

本文已经同步至我的个人博客站点:
jquery插件(二):Infinite Scroll–无限分页(http://ifxoxo.com/jquery-infinite-scroll.html)

如果想要看实例,可以到以下网址查看:
http://520xmn.com

二、具体用法

1、所需的资源

(1)jquery

既然是jquery插件,肯定是需要先加载jquery的,可以到jquery官网去下载最新的jquery:http://jquery.com/

(2)infinite scroll

到github上去下载最新的infinite scroll插件,地址如下:https://github.com/paulirish/infinite-scroll
在里面找到一个 jquery.infinitescroll.min.js

 
1
2
3
4
5
6
 
 
//加载的时候注意文件的路径
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.infinitescroll.min.js"></script>
 

2、所需的html

(1)有一个容器

当异步加载后,内容可以存在在这里

 
1
2
3
4
5
6
7
8
9
 
 
<div id='masonny-div'>
<div class="item">内容</div>
<div class="item">内容</div>
  ......
<div class="item">内容</div>
</div>
 

(2)在页面上需要有一个翻页的连接

(待会需要在js上指明),比如

 
1
2
3
4
5
6
 
 
<div id="next">
    <a href="/Pic/randpage?page=2"></a>
</div>
 

3、所需的css

在加载的时候,页面会出现一个loading的层(id是#infscr-loading),这个部分的样式需要我们自己去定义,
下面是我自己网站的一个半透明黑色的样式,如果你喜欢,可以直接拿去用

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
 
#infscr-loading {
  text-align: center;
  z-index: 100;
  position: fixed;
  left: 45%;
  bottom: 40px;
  width: 200px;
  padding: 10px;
  background: #000;
  opacity: 0.8;
  color: #FFF;
  -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;
}
 

4、js部分–自动加载

前面的部分都准备之后,js部分其实是很容易的,直接调用infinitescroll方法,指明一些参数就行。(参数列表详见一、6)
如果想要看示例,可以查看520xmn.com,里面的无限分页就是用了这个插件.

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
 
$('#masonny-div').infinitescroll({
    navSelector  : "#next",   // 页面分页元素(成功后会被隐藏)
    nextSelector : "#next a", // 需要点击的下一页链接,和2的html要对应
    itemSelector : ".item"  , // ajax回来之后,每一项的selecter
                              //(比如每篇文章都有item这个class)
    animate      : true,      //加载完毕是否采用动态效果
    extraScrollPx: 100,       //向下滚动的像素,必须开启动态效果
    // debug     : true,      //调试的时候,可以打开
    bufferPx     : 5,         //提示语展现的时长,数字越大,展现时间越短
    loading: {
        finishedMsg: '没有更多内容了', //当加载失败,或者加载不出内容之后的提示语
        img:  'loading-new.gif',   //自定义loadding的动画图
        msgText : '正在加载中...',    //加载时的提示语
        },
    },
    function( newElements, opt ) {
       //成功后执行自定义的函数
       //如果需要对新内容进行加工,就在这里实现
    }
};
 

5、js部分–点击后再加载

infinite scroll默认是自动加载的,但是在某些情况下,我们希望的是用户点击“加载”按钮之后,才去异步加载数据,实现起来也不难。

就在需要实现点击后再加载的地方,加上类似的代码

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
 
// 取消scroll绑定
$(window).unbind('.infscr');
 
// 手动点击的元素
$('#next').click(function(){
   $('#masonny-div').infinitescroll('retrieve');
});
 
// 如果没有下一页,去掉分页
$(document).ajaxError(function(e,xhr,opt){
  if (xhr.status == 404) $('#next').remove();
});
$('#next').show();  //显示下一页
 

6、参数说明

infinitescroll还有很多强大的参数支持
这是从 https://github.com/paulirish/infinite-scroll翻译过来的,如果觉得翻译的不对,可以自行查询原版。

 参数  默认值  作用
  debug   false  是否打开debug模式
 nextSelector   “”  翻页的链接
navSelector “” 页面分页元素,成功后会被隐藏
contentSelector null 指定之后,异步加载的内容会用这个设置过滤一下
itemSelector null ajax回来之后,每一项的selecter
比如每篇文章都有item这个class
animate false 加载完毕是否采用动态效果
pathParse underfine 切割nextSelector的url的规则, 提取出需要加载第几页
如:["/index?key1=${val1 }&key2=${val2}&page=",""]
dataType html 加载回来的数据格式,支持”json|html”
bufferPx 40 提示语展现的时长,数字越大,展现时间越短
infid 0 示例的id,用于区分页面多次用到这个插件

7、其他

(1)操作

infiniter scroll还提供暂停和恢复操作,

 
1
2
3
4
5
 
 
$('.selector').infinitescroll('pause');
$('.selector').infinitescroll('resume');
 

(2)状态

提供了几个状态供我们去查询
isDuringAjax
isInvalidPage
isDestroyed //处在destroyed状态?
isDone //加载完毕?
isPaused //处在暂停状态?
currPage //当前页数

我们可以在自定义函数里面去查询

 
1
2
3
4
5
6
7
 
 
function( newElements, opt ){
   var page = opts.state.currPage;
   //console.log(page);
}
 

p.s
本文已经同步至我的个人博客站点:
jquery插件(二):Infinite Scroll–无限分页(http://ifxoxo.com/jquery-infinite-scroll.html)

如果想要看实例,可以到以下网址查看:
http://520xmn.com

 转自:http://ifxoxo.com/jquery-infinite-scroll.html

Infinite Scroll–无限分页的更多相关文章

  1. Infinite Scroll - jQuery & WP 无限滚动插件

    无限滚动(Infinite Scroll)也称为自动分页.滚动分页和无限分页.常用在图片.文章或其它列表形式的网页中,用来在滚动网页的时候自动加载下一页的内容.Infinite Scroll  这款  ...

  2. JavaScript Infinite scroll & Masonry

    // infinitescroll() is called on the element that surrounds // the items you will be loading more of ...

  3. mint ui解决Navbar和Infinite scroll共存时的bug

    Navbar和Infinite scroll共同使用时会出现无限加载的问题,滑动也会出现乱加载. 只需要判断一下就可以了,代码: html: <mt-navbar v-model="s ...

  4. infinite scroll blogs

    infinite scroll blogs 无限滚动 blogs beacon api https://www.sitepoint.com/introduction-beacon-api/ Histo ...

  5. 无限分页//////////////zz

    由于网页的执行都是单线程的,在JS执行的过程中,页面会呈现阻塞状态.因此,如果JS处理的数据量过大,过程复杂,可能会造成页面的卡顿.传统的数据展现都以分页的形式,但是分页的效果并不好,需要用户手动点击 ...

  6. JS实现无限分页加载——原理图解

    由于网页的执行都是单线程的,在JS执行的过程中,页面会呈现阻塞状态.因此,如果JS处理的数据量过大,过程复杂,可能会造成页面的卡顿.传统的数据展现都以分页的形式,但是分页的效果并不好,需要用户手动点击 ...

  7. Infinite scroll has been called autopagerize, unpaginate, endless pages

    http://www.infinite-scroll.com/ Infinite scroll has been called autopagerize, unpaginate, endless pa ...

  8. 网页浏览 infinite scroll效果知识

    infinite scroll 类似一些网站, 例如京东搜索商品, 浏览到最后一页,自动加载新的商品. 一则可以加快首页响应速度, 二则减轻带宽和服务器荷载. 这么多商品信息一次性返回给客户端也是不可 ...

  9. infinite auto load more & infinite scroll & load more

    infinite auto load more & infinite scroll & load more https://codepen.io/xgqfrms/pen/NZVvGM ...

随机推荐

  1. 弹出窗口zDialog的使用

    因为没有元素可以显示到Frameset上面去,所以重新定义了,一个index.htm,对其的操作是: Index.htm    <script language="javascript ...

  2. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(36)-文章发布系统③-kindeditor使用

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(36)-文章发布系统③-kindeditor使用 我相信目前国内富文本编辑器中KindEditor 属于前 ...

  3. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(34)-文章发布系统①-简要分析

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(34)-文章发布系统①-简要分析 系列目录 最新比较闲,为了学习下Android的开发构建ASP.NET ...

  4. OCCI处理CHAR类型字符串变量的不同

    问题背景: 一个旧应用,原先应用是用proc写的,9i的库,如今应用须要改为使用OCCI,当中有一段查询逻辑:select ... where upper(state)=upper(:1). (此处请 ...

  5. Android中GridView拖拽的效果

    最 近看到联想,摩托罗拉等,手机launcher中有个效果,进入mainmenu后,里面的应用程序的图标可以拖来拖去,所以我也参照网上给的代码,写了 一个例子.还是很有趣的,实现的流畅度没有人家的那么 ...

  6. 再回首,Java温故知新(九):Java基础之流程控制语句

    流程控制语句分为条件语句.循环语句和中断语句. 中断语句包括break和continue,两者的区别在于break会跳出整个循环,而continue则是跳出此次循环,之后还会继续下一次循环. 条件语句 ...

  7. CentOS 6.3 源码安装LAMP(Linux+Apache+Mysql+Php)环境

    一.简介 什么是LAMP LAMP是一种Web网络应用和开发环境,是Linux, Apache, MySQL, Php/Perl的缩写,每一个字母代表了一个组件,每个组件就其本身而>言都是在它所 ...

  8. 禁止鼠标多次点击选中div中的文字

    <!DOCTYPE html><html><head><meta charset="utf-8"><title>Fire ...

  9. Codeforces 231E - Cactus

    231E - Cactus 给一个10^5个点的无向图,每个点最多属于一个环,规定两点之间的简单路:从起点到终点,经过的边不重复 给10^5个询问,每个询问两个点,问这两个点之间有多少条简单路. 挺综 ...

  10. ASP.NET MVC 第五回 ActionResult的其它返回值

    我们上边所看到的Action都是return View();我们可以看作这个返回值用于解析一个aspx文件.而它的返回类型是ActionResult如 public ActionResult Inde ...