Question

我一直试图让这项工作暂时停止，但没有取得任何进展。不确定我是否遗漏了某些内容，或者它是否在此设置中无效。

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

我正在使用DeSandro的标准：Infinite Scroll，Masonry，ImagesLoaded，并将组合基于this pen。

我通过tumblr API将tumblr feed精简加载，并显示在砌体网格中，但无法使无限滚动工作。

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

（在点击之前的FYI，它是女性的内衣网站。）

谢谢！

在shopify中通过ajax加载的tumblr API上的infinte scroll + imagesloaded + masonry

0 个答案: