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），向右侧放置箭头（向左箭头）。

到目前为止，所有这一切都工作得很好。我的问题从下一页加载时开始。显然，箭头代码仅适用于第一页，而不适用于新添加的元素。我尝试过在代码的不同部分迭代箭头代码，但我没有对它进行任何操作。这真的开始迷惑我了。我对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); }); 

要计算一旦该项目可见时显示的箭头。