masonry+infinitescroll实现无限加载分页

来源:互联网 发布:linux打开绝对路径 编辑:程序博客网 时间:2024/06/05 14:37

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

原创粉丝点击