masonry+infinitescroll实现无限加载分页

唐默
2023-12-01

在我的博客中之前已经分别讲过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

 类似资料: