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），并在向右的 div 上放置了一个不同的箭头（.left arrow）。

到目前为止，所有这些都运行良好。当加载下一页时，我的问题就开始了。显然，箭头代码仅适用于第一页，而不适用于新附加的元素。我尝试过在代码的不同部分迭代箭头代码，但我没有运气。这真的开始让我困惑了。我对 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); });

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