Responsive design 砌体+自定义无限滚动+响应网格宽度=与页面上的其他页面内容重叠调整页面大小？

我正在shopify的一个演示商店中与Mashise合作，在那里我们还使用了一个改编的无限卷轴来加载产品，而不必对它们进行分页。这一切都很好，直到我尝试调整页面大小并重新计算Mashise div的高度为止。它会这样做，但只包括第一次页面加载时加载的元素的高度，而不是在scroll上加载的所有元素的高度

这是我的密码：

$(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;
    }
  });
});    

});

下面是演示页面的链接：

---

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

您需要在下一页重新调用砌体函数。在pinfscrload=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"
          });
        }
      }
    }