Masonry + Custom Infinite Scroll + Responsive Grid Width = 与页面调整大小时的其他页面内容重叠？答案

【问题标题】：Masonry + Custom Infinite Scroll + Responsive Grid Width = Overlap with other page content on page resize?Masonry + Custom Infinite Scroll + Responsive Grid Width = 与页面调整大小时的其他页面内容重叠？
【发布时间】：2014-08-15 01:43:17
【问题描述】：

我正在与 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

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

【问题讨论】：

标签： responsive-design shopify infinite-scroll liquid masonry

【解决方案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"
          });
        }
      }
    }

祝你好运！

【讨论】：