masonry+infinitescroll实现无限加载分页

最新推荐文章于 2020-07-27 03:04:45 发布

JiangJunDriver

最新推荐文章于 2020-07-27 03:04:45 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： jq 文章标签：分页插件 js 无限加载-分页 jquery

本文链接：https://blog.csdn.net/JiangJunDriver/article/details/73292157

jq 专栏收录该内容

10 篇文章

订阅专栏

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