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 に答える