0

我正在与 Masonry 在 shopify 演示商店合作，我们还使用无限滚动的改编来加载产品，而不必对它们进行分页。在我尝试调整页面大小并且砌体重新计算砌体 div 的高度之前，这一切都很好。它这样做，但只包括在第一页加载时加载的元素的高度，而不是在滚动时加载的所有元素。

这是我的代码：

$(document).ready(function () {
var $container = $('#container');
var msnry = new Masonry( container, {
  itemSelector: '.item'
});
// initialize
$('#container').imagesLoaded( function(){
$container.masonry({
  itemSelector: '.item'
});
});
// infinite Scroll
var pInfScrLoading = false;
var pInfScrDelay = 200;

function pInfScrExecute() {
  if($(window).scrollTop() >= (($("#product-list-foot").offset().top)-800)){
    var loadingImage;
    pInfScrNode = $('.more').last();    
    pInfScrURL = $('.more a').last().attr("href");
    if(!pInfScrLoading && pInfScrNode.length > 0 && pInfScrNode.css('display') != 'none') {
      $.ajax({
        type: 'GET',
        url: pInfScrURL,
        beforeSend: function() {
          pInfScrLoading = true;
          loadingImage = pInfScrNode.clone().empty().append('<img src=\"http://cdn.shopify.com/s/files/1/0068/2162/assets/loading.gif?105791\" />');
          loadingImage.insertAfter(pInfScrNode);
          pInfScrNode.hide();
        },
        success: function(data) {
          // remove loading feedback
          pInfScrNode.next().remove();
          var filteredData = $(data).find(".item");
          $('#container').imagesLoaded( function(){
          filteredData.appendTo( $("#container") );

          msnry.appended(filteredData);
          });
          var newLink = $(data).find(".more");
          newLink.appendTo( $("#container") );
          loadingImage.remove();                    
          pInfScrLoading = false;
        },
        dataType: "html"
      });
    }
  }
}
$(document).ready(function () {
  $(window).scroll(function(){
    console.log(($("#product-list-foot").offset().top)-200);
    $.doTimeout( 'scroll', pInfScrDelay, pInfScrExecute);
    if($(window).scrollTop() >= (($("#product-list-foot").offset().top)-800)){
      pInfScrDelay = 200;
    }
  });
});    

});

这是演示页面的链接： http: //sweetpea-bicycles.myshopify.com/collections/accessories

同样，仅当您使屏幕变小或变大以使网格宽度发生变化时，才会出现此问题。

4

1 回答 1

-1

您需要再次调用 Masonry 功能以查看下一页。您在“pInfScrLoading = false;”之后输入该代码 例子：

function pInfScrExecute() {
      if($(window).scrollTop() >= (($("#product-list-foot").offset().top)-800)){
        var loadingImage;
        pInfScrNode = $('.more').last();    
        pInfScrURL = $('.more a').last().attr("href");
        if(!pInfScrLoading && pInfScrNode.length > 0 && pInfScrNode.css('display') != 'none') {
          $.ajax({
            type: 'GET',
            url: pInfScrURL,
            beforeSend: function() {
              pInfScrLoading = true;
              loadingImage = pInfScrNode.clone().empty().append('<img src=\"http://cdn.shopify.com/s/files/1/0068/2162/assets/loading.gif?105791\" />');
              loadingImage.insertAfter(pInfScrNode);
              pInfScrNode.hide();
            },
            success: function(data) {
              // remove loading feedback
              pInfScrNode.next().remove();
              var filteredData = $(data).find(".item");
              $('#container').imagesLoaded( function(){
              filteredData.appendTo( $("#container") );

              msnry.appended(filteredData);
              });
              var newLink = $(data).find(".more");
              newLink.appendTo( $("#container") );
              loadingImage.remove();                    
              pInfScrLoading = false;

                <!--INPUT IN HERE-->

            },
            dataType: "html"
          });
        }
      }
    }

祝你好运！

于 2015-08-03T09:16:06.567 回答