jquery.infinitescroll无限加载插件

一、引入所需js插件

<script type="text/javascript" src="js/jquery-1.10.0.min.js">script>
<script type="text/javascript" src="js/jquery.infinitescroll.min.js">script>

二、html

1、创建一个容器

"conversation">
    
"comment">...
    
"comment">...
    ...

2、添加翻页的链接

<div id="page-nav">
    <a href="conversations.php?page=2">a>
div>

三、所需的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;
}

四、js自动加载部分

    infiniteScroll = function() {
        // infinite scrolling
        var $container = $('#conversation');

        $container.infinitescroll({
            binder: $('#conScroll'),       // used to cache the selector
            navSelector  : '#page-nav',    // selector for the paged navigation
            nextSelector : '#page-nav a',  // selector for the NEXT link (to page 2)
            itemSelector : '.comment',     // selector for all items you'll retrieve
            pixelsFromNavToBottom: 150,
            extraScrollPx: 50,
            debug        : true,
            prefill      : true,
            bufferPx     : 1,              //提示语展现的时长，数字越大，展现时间越短
            path : function(page){
                return 'conversation.html';
            },
            loading: {
                finishedMsg: 'no more comments！',
                msgText: 'onload old comments',
                img: 'img/loading-dark.gif'
            }
        },       
        function( nextComments ) {
            var $nextComm = $( nextComments );
            $container.append($nextComm);
        });
    }
    infiniteScroll();
    //onload more
    /*$('#conScroll .onloadmore').click(function(){
        $("#conversation").infinitescroll('retrieve');; //比如加到某个click事件中
    });*/

五、加载“更多”

// 取消scroll绑定
$('#conScroll').unbind('.infscr');

// 手动点击的元素
$('#next').click(function(){
    $('##conversation').infinitescroll('retrieve');
});

demo下载地址 http://download.csdn.net/detail/jiangjundriver/9871458