1、使用场景

对于有很多相似条目需要展示的页面，可以用无限下拉的方式来避免用户通过点击下一页来获取更多内容。比如今日头条网站，打开后，可以一直向下滚动，当滚动到页面底部后，就会加载更多新闻条目。如果你的网速不够快，可以看到底部会偶尔会显示“推荐中”的加载提示。

2、实现方式

思路可能很简单：判断滚动到底部，然后执行后台加载数据，获取数据后动态添加dom内容。但是实现起来可能有很多小问题：如何判断是否滚动到底部；是在某个div里滚动还是整个页面滚动；加载等待时的提示信息或动画处理；加载成功后dom的拼接；每次加载时记录第几次加载；加载失败的处理。这是我想到的，当然可能具体实现起来还有很多别的小问题。所以，我找到了Infinite Scroll这个插件。

3、使用

（1）下载文件jquery.infinitescroll.min.js

点击前往官网下载，位置如图所示：

（2）引用文件

将jquery和infinitescroll引入到你想要无限滚动加载的页面。

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

（3）页面结构

<!--tasks是最外层的元素，所有加载的内容都会放在这个元素内-->
<div id='tasks'  style="overflow-y: auto;">
    <!--这是显示的每个条目的内容，保证都有一个共同的class属性，不必是item-->
   <div class="item">条目1</div>
   <div class="item">条目2</div>
    ......
   <div class="item">条目n</div>
   <!--在最后，要加上一个导航，每次滚到底部，就会触发这个url去加载数据-->
   <div id="navigation">
        <a href="loadmore?page=2" ></a>
   </div>
</div>

（4）JavaScript代码

$("#tasks").infinitescroll({
    navSelector : "#navigation", //页面分页元素--成功后自动隐藏
    nextSelector : "#navigation a",
    itemSelector : ".item",
    animate : true,
    debug : false, //调试的时候，可以打开
    maxPage : 100, //加载次数
    extraScrollPx : 200,
    loading: {
        msgText:"",
        finished: function(){
            //加载完成后执行   
        },
         finishedMsg: '',//最后加载完成后的提示语 
    },
    behavior: 'local',
    binder: $('#tasks')
});

这里，是绑定的$('#tasks')这个对象，也就是说，在这个元素内进行滚动无限加载。如果是整个页面滚动，就要绑定window这个对象。官方文档是这么说的：

To scroll inside an element having overflow, use the local behavior.

$('.selector').infinitescroll({
  behavior: 'local',
  binder: $('.selector'),
  // scroll on this element rather than on the window
  // other options
});

注意的是，要想在某一元素内滚动，必须为该元素设置overflow样式属性。这是最简单的配置参数，Infinite Scroll提供了非常多的回调以及监控函数。

（5）配置说明

因为很多参数都没有用到，没有深入去研究，如果基础配置不能满足需求，可以自行去调试研究。
参考：Infinite Scroll无限分页滚动使用示例
 

$('.selector').infinitescroll({
          loading: {//加载时的配置
            finished: undefined,//每次加载完成后执行，可以自定义function
            finishedMsg: "加载完成",//加载完成后的提示语，可以为空
            img: null,//自定义loadding的动画图
            msg: null,
            msgText: "正在加载",//加载时的提示语
            selector: null,
            speed: 'fast',
            start: undefined
          },
          state: {
            isDuringAjax: false,
            isInvalidPage: false,
            isDestroyed: false,
            isDone: false, // For when it goes all the way through the archive.
            isPaused: false,
            currPage: 1
          },
          behavior: undefined,
          binder: $(window), // 在哪个元素内滚动
          nextSelector: "div.navigation a:first",
          navSelector: "div.navigation",
          contentSelector: null, // rename to pageFragment
          extraScrollPx: 150,
          itemSelector: "div.post",
          animate: false,//加载完毕是否采用动态效果
          pathParse: undefined,
          dataType: 'html',
          appendCallback: true,
          bufferPx: 40,
          errorCallback: function () { },
          infid: 0, //Instance ID
          pixelsFromNavToBottom: undefined,
          path: undefined, // Can either be an array of URL parts (e.g. ["/page/", "/"]) or a function that accepts the page number and returns a URL
          maxPage:undefined // to manually control maximum page (when maxPage is undefined, maximum page limitation is not work)
    });

（6）其他

问题一：如果是在js中配置导航元素的url地址，最好将page参数放在第一位，否则可能导致插件计算页码出错。如：

$("#nav-a").attr("href","loadmore?page=2&keyword=哈哈")


下载地址：https://github.com/metafizzy/infinite-scroll