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