Question

我对tumblr很新，所以我一直在玩“主题”＃39;目前我正试图引入无限滚动。这是我正在使用的资源：

Demo Tumblr：http://testingthemedes.tumblr.com/
Infinite Scroll.js：http://www.infinite-scroll.com/
砌体：http://masonry.desandro.com/

您可以希望看到我已经让砌体网格布局正常工作。我现在正试图引入无限滚动来扩展页面并附加下一页内容，然后我会尝试确保回调砌体以确保新图像附加在相同的布局。

这是我的代码：

<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-infinitescroll/2.0b2.120519/jquery.infinitescroll.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4.1/dist/masonry.pkgd.min.js"></script>
<script src="https://unpkg.com/imagesloaded@4.1.1/imagesloaded.pkgd.min.js">

(function() {

// Main content container
var $container = $('#posts');

// Masonry + ImagesLoaded
$container.imagesLoaded(function(){
    $container.masonry({
        // selector for entry content
        itemSelector: '.post'
    });
});

// Infinite Scroll
$container.infinitescroll({

    // selector for the paged navigation (it will be hidden)
    navSelector  : "nav.pagination",
    // selector for the NEXT link (to page 2)
    nextSelector : "nav.pagination a#next",
    // selector for all items you'll retrieve
    itemSelector : ".post",

    // finished message
    loading: {
        finishedMsg: 'No more pages to load.'
        }
    },

    // 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 );
        });

});

// Pause Infinite Scroll
$(window).unbind('.infscr');

// Resume Infinite Scroll
$('.next').click(function(){
    $container.infinitescroll('retrieve');
    return false;
});

})();

这只是一个片段，要查看完整代码，请点击此处，因为我无法粘贴字符数限制：http://pastebin.com/hnpfmCLb

我发现这很棘手，因为我在控制台中看不到任何错误，但它似乎并没有触发并引入下一页内容。我希望一双新鲜的眼睛可以帮助我解决这个问题。提前谢谢了，约翰

jQuery无限滚动和tumblr

0 个答案: