jquery插件（二）：Infinite Scroll–无限分页

一、前言

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

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

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

2、所需的html

（1）有一个容器

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

<div id = 'masonny-div' >
  <div  class = "item" >内容 </div >
  <div  class = "item" >内容 </div >
   ......
  <div  class = "item" >内容 </div >
</div >

（2）在页面上需要有一个翻页的连接

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

<div id = "next" >
     <a href = "/Pic/randpage?page=2" ></a >
</div >

3、所需的css

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

#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，里面的无限分页就是用了这个插件.

$ ( '#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默认是自动加载的，但是在某些情况下，我们希望的是用户点击“加载”按钮之后，才去异步加载数据，实现起来也不难。

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

// 取消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还提供暂停和恢复操作，
如

$ ( '.selector' ) .infinitescroll ( 'pause' ) ;
$ ( '.selector' ) .infinitescroll ( 'resume' ) ;

（2）状态

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

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

  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