Question

我正在使用Infinite Scroll和Twitter样式触发器来加载帖子。当我点击切换时，它会停留在它的位置，并且无限滚动#infscr-loading出现在它上方。我想这样做，以便自定义触发器值更改为“加载更多帖子”或类似的东西，＃infscr-loading不会出现在它上面。加载新帖后，它应该恢复为“加载更多帖子”触发器，当没有更多帖子加载时，它会说“所有帖子已加载”。我希望你理解我的观点。这是我想要的结果：演示2上的http://jscroll.com/。

JS

$(function() {

    var $container = $('.posts');
    $container.imagesLoaded(function() {
        $container.masonry({
            itemSelector: '.post',
            isFitWidth: true,
            "gutter": 30
        });
    });

    $container.infinitescroll({
            navSelector: '.infinite-pagination .load-more-posts',
            nextSelector: '.infinite-pagination .load-more-posts',
            itemSelector: '.post',
            behavior: 'twitter',
            loading: {
                img: 'http://static.tumblr.com/hpghjri/FA5n90quf/loading.gif',
                msgText: 'Loading more posts',
                finishedMsg: 'All posts loaded'
            }
        },
        // trigger Masonry as a callback
        function(newElements) {
            // hide new items while they are loading
            var $newElems = $(newElements).css({
                opacity: 0
            });
            // ensure that images load before adding to masonry layout
            $newElems.imagesLoaded(function() {
                // show elems now they're ready
                $newElems.animate({
                    opacity: 1
                });
                $container.masonry('appended', $newElems, true);
            });
        }
    );
});

HTML

<div class="infinite-pagination">
    <a class="load-more-posts" href="{NextPage}">Load more posts</a>
</div>

实时预览

http://primor-demo.tumblr.com

更改无限滚动切换

0 个答案: