masonry+infinitescroll實現無限加載分頁

在我的博客中之前已經分別講過masonry和infinitescroll插件，以及詳盡的demo。這裏講的重點是二者的結合實現無限加載分頁，話不多說，直接上代碼。

$(function(){
            var $container = $('#masonry');
            $container.imagesLoaded( function(){
                $container.masonry({
                    itemSelector : '.box',
                    gutterWidth : 20,
                    isAnimated: true,
                });
            });

            infiniteScroll = function() {
            // infinite scrolling
            var $container = $('#masonry');
            $container.infinitescroll({
                binder: $('#conScroll'),
                navSelector  : '#page-nav',    // selector for the paged navigation
                nextSelector : '#page-nav a',  // selector for the NEXT link (to page 2)
                itemSelector : '.box',         // selector for all items you'll retrieve
                pixelsFromNavToBottom: 150,
                extraScrollPx: 50,
                // debug        : true,
                prefill      : true,
                bufferPx     : 1,              //提示語展現的時長，數字越大，展現時間越短
                path : function(page){
                    return 'image.html';
                },
                loading: {
                    finishedMsg: 'no more comments！',
                    msgText: 'onload old comments',
                    img: 'images/loading-dark.gif'
                }
                },       
                function( nextComments ) {
                    var $nextComm = $( nextComments );
                    $container.masonry( 'appended', $nextComm, true );  //這裏需要特別注意
                });
            }
            infiniteScroll();
        });

demo下載地址 http://download.csdn.net/detail/jiangjundriver/9871462