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、創建一個容器

<div id="conversation">
    <div class="comment">...</div>
    <div class="comment">...</div>
    ...
</div>

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