jQuery砌体和无限滚动问题

Question

<script>
$(window).load(function () {
    var $wall = $('#content');
    $wall.imagesLoaded(function () {
        $wall.masonry({
            itemSelector: '.oddpost',
        isAnimated: true
    });
    $(".oddpost").each (function (idx, el) {   
     if ($(el).position().left < $(el).width()) {
      $('.rightarrow', el).show();
     }
     else {
      $('.leftarrow', el).show();
     }
 });
});

$wall.infinitescroll({
    navSelector: '#pagination',
    nextSelector: '#pagination li a.pagination_nextlink',
    itemSelector: '.oddpost',
    loadingImg: "http://static.tumblr.com/qrevc1p/WTKlx2dsg/gsnjnwui-um.gif",
    loadingText: " ",
    donetext: " ",
    bufferPx: 100,
    debug: false,
    errorCallback: function () {
        $('#infscr-loading').animate({
            opacity: .8
        }, 2000).fadeOut('normal');
    }
}, function (newElements) {
    var $newElems = $(newElements);
    $newElems.hide();
    $newElems.imagesLoaded(function () {
        $wall.masonry('appended', $newElems, {
            isAnimated: true,
            animationOptions: {
                duration: 900,
                easing: 'linear',
                queue: false
            }
        }, function () {
            $newElems.fadeIn('slow');    
        });
    });
  });
$('#content').show(500);
  });
  </script>

我在我正在开发的 Tumblr 主题上使用该脚本，以在其上应用砖石和无限滚动。这是一个两列布局，因此 div 只能向左或向右。除了在主题上应用砌体之外，它还在向左的 div 上放置一个箭头（.rightarrow），为向右的那些放置一个不同的箭头（.left 箭头）。

到目前为止，所有这些都运行良好。我的问题在加载下一页时开始。显然，箭头代码仅适用于第一页，但不适用于新添加的元素。我试过在代码的不同部分迭代箭头代码，但我没有运气。这真的开始让我感到困惑。我对 jQuery 并不陌生，但我真的很难做到这一点。

谁能告诉我应该把箭头代码放在哪一部分，以便它也适用于新附加的 div？

Answer 1

您需要在将箭头添加到页面后运行显示箭头的代码。

我建议你使用一个函数来避免复制/粘贴。

/**
 * Shows the appropiate arrow for a given element.
 */
function showArrowOn(el) {
  if ($(el).position().left < $(el).width()) {
    $('.rightarrow', el).show();
  } else {
    $('.leftarrow', el).show();
  }
}

$(window).load(function () {
  ...
  $(".oddpost").each(function (idx, el) { 
     // Using function to show the arrows on the items at window load.
     showArrowOn(el); 
  }
}

$wall.infinitescroll({
  ...
  $newElems.imagesLoaded(function () {
    $wall.masonry('appended', $newElems, {
      ...
      }, function () { 
        // Show the arrows once the new elems are appended.
        $newElems
          .fadeIn('slow')
          .each(function () { showArrowOn(this); });
      });

});

您在新元素上显示箭头的逻辑可能会遇到一些问题，因为在您向 jQuery 询问它们的位置和宽度（取决于您的 css）时，这些箭头是不可见的，如果您遇到问题，请尝试以下：

$newElems.fadeIn('slow', function () { showArrowOn(this); });

计算在项目可见时显示的箭头。