1

我一直试图使这项工作有一段时间，但没有取得任何进展。不确定我是否遗漏了某些东西，或者它是否在此设置中不起作用。

简而言之：客户有一个 shopify 网站，并希望以无限滚动的方式从 tumblr 加载图像。

我正在使用 DeSandro 的标准：Infinite Scroll、Masonry、ImagesLoaded，并基于这支笔的组合。

我通过 tumblr API 很好地加载了 tumblr 提要，并显示在砖石网格中，但无法让无限滚动工作。

InfiniteScroll 是否会因为内容是通过 ajax 加载而不起作用，并且当 InfiniteScroll 尝试加载它时实际上还没有出现在页面上？任何见解将不胜感激！

$(document).ready(function() {

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

$.ajax({
    url: 'https://api.tumblr.com/v2/blog/xxxxxxx.tumblr.com/posts?api_key=xxxxxxx&limit={{ pagesize }}&offset={{ offset }}&callback=?',
    dataType:'json',
    success: function(data) { 
        $.each(data.response.posts, function(index,item) {
          if (this['type'] === 'photo') {
            var src = item.photos[0].alt_sizes[0].url;
            $("#tblr_container").append('<div class="item masonry__item ' + index + '"><li><img src = "'+src+'"></li></div>');
          } 
        }); 

        // init Masonry
        var $grid = $('#tblr_container').masonry({
            itemSelector: 'none', // select none at first
            columnWidth: '.grid-sizer',
            gutter: 5,
            percentPosition: true,
            stagger: 30,
            // nicer reveal transition
            visibleStyle: { transform: 'translateY(0)', opacity: 1 },
            hiddenStyle: { transform: 'translateY(100px)', opacity: 0 },
        });

        // get Masonry instance
        var msnry = $grid.data('masonry');

        // initial items reveal
        $grid.imagesLoaded( function() {
            $grid.removeClass('are-images-unloaded');
            $grid.masonry( 'option', { itemSelector: '.item' });
            var $items = $grid.find('.item');
            $grid.masonry( 'appended', $items );
        });

        // init Infinte Scroll
        $grid.infiniteScroll({
            path: '.pagination__next',
            append: '.item',
            outlayer: msnry,
            hideNav: '#pagination',
            status: '.page-load-status',
        });         
    }
});

这是链接：https ://negativeunderwear.com/pages/for-women

而且，第 2 页的链接：https ://negativeunderwear.com/pages/for-women?page=2&cache= false - 这是 .pagination__next

（点击之前仅供参考，这是一个女性内衣网站。）

谢谢！

4

0 回答 0