Endless Scroll 插件

插件描述：Endless Scroll 是 jQuery 一个用来实现无限滚动的插件，相信你试过微软新搜索引擎 Bing 的搜索结果或者花瓣，当鼠标向下滚动时，新的内容会一直出现在下方，而不是翻页去浏览。

概念

首先，它是基于[jQuery](http://lib.csdn.net/base/jquery "jQuery知识库")的，另外还要明白无限滚动的概念：无限滚动的实现原理就是当你在网页上的滚动条滚动到离网页底部一定长度的时候，触发某ajax函数（infinite-scroll内已经封装好）,往后台加载文件或者数据，又或者从外部引入静态html形式文件。

示例代码：

引入插件库文件

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.endless-scroll-1.3.js"></script>

<div id="container">            <!-- 容器 -->  
        <div class="scroll">         <!-- 每次要加载数据的数据块-->  
        第一页内容第一页内容<br>  
        第一页内容<br>第一页内容<br>第一页内容<br>  
        第一页内容<br>第一页内容<br>第一页内容<br>  
        第一页内容<br>第一页内容<br>第一页内容  
        </div>  
    </div>  
    <div id="navigation" align="center">         <!-- 页面导航-->  
        <a href="user/list?page=1"></a>        <!-- 此处可以是url，可以是action，要注意不是每种html都可以加，是跟当前网页有相同布局的才可以。另外一个重要的地方是page参数，这个一定要加在这里，它的作用是指出当前页面页码，没加载一次数据，page自动+1,我们可以从服务器用request拿到他然后进行后面的分页处理。-->  
   </div>  

$("#container").infinitescroll({  
            navSelector: "#navigation",     //页面分页元素--成功后自动隐藏  
            nextSelector: "#navigation a",  
            itemSelector: ".scroll " ,             
            animate: true,  
            maxPage: 3,  
            loadingImg   : "/img/loading.gif",                   //加载时候显示的进度条，用户可以自定义
            loadingText  : "Loading new posts...",            //加载时显示的文字        
            extraScrollPx: 50,                                            //离网页底部多少像素时触发ajax  
            donetext     : "I think we've hit the end, Jim" ,     //加载完数据(到达底部时)显示的文字提醒        
             errorCallback: function(){},                             //加载完数据后的回调函数，可选          
            loading: {
                msgText:"",
                finished: function(){
                 //加载完成后执行   
                   },
            finishedMsg: '',//最后加载完成后的提示语 
           },
          behavior: 'local',  //行为:本地
         binder: $('#container')
                        
 }); 

这里，是绑定的$('#container')这个对象，在这个元素内进行滚动无限加载。如果是整个页面滚动，就要绑定window这个对象。想在某一元素内滚动，必须为该元素设置overflow样式属性

配置说明

$('.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)
    });