Jquery imagesLoaded 插件重叠问题

Question

我有一个使用 jquery masonry 和在帖子上无限滚动的 tumblelog。砌体仅适用于前几个帖子，然后与其他所有内容重叠。我知道这种问题被问了很多，但似乎没有人知道答案。这是我的代码：

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/bswe8t6/UFVlryaq2/jquerymsnryv2.js"></script>

<script type="text/javascript">
$(window).load(function(){
var $wall = $('#posts');
$wall.imagesLoaded(function(){
$wall.masonry({
columnWidth: 196,
itemSelector: '.post',
isAnimated : false
});
});

$wall.infinitescroll({
navSelector : '#navigation', 
nextSelector : 'a#nextPage', 
itemSelector : '.post', 
bufferPx : 2000,
debug : false,
errorCallback: function() { 
$('#infscr-loading').fadeOut('normal'); 
}},
function( newElements ) {
var $newElems = $( newElements );
$newElems.hide();
$newElems.imagesLoaded(function(){
$wall.masonry( 'appended', $newElems,{isAnimated: false}, function(){$newElems.fadeIn('slow');} );
});
}); $('#content').show(500);
});

</script>

Here's my link. 谢谢！

Answer 1

您的页面上的问题太多，无法给您一个简单的答案。

1. 你有 2 个！包含不同的“无限卷轴”脚本。

   一个是这一行：

   <script type="text/javascript" src="http://codysherman.com/tools/infinite-scrolling/code"></script>
   

   另一个包含在另一个脚本中：

   <script type="text/javascript" src="http://static.tumblr.com/bswe8t6/UFVlryaq2/jquerymsnryv2.js"></script>
   

   删除第一个脚本，保留第二个我猜的。

2. 第二个脚本是打算与 Masonry 插件一起使用的，但是您提供的代码示例完全错误。我不知道从哪里开始。

   在对 $wall.masonry 的调用中，“singleMode: true”不是有效选项。

   您在脚本中引用的一些元素甚至在您的页面上都不存在：

   1. '.masonryWrap' 不存在
   2. “#navigation”不存在
   3. 'a#nextPage' 不存在

3. 您的页面在任何地方都没有导航链接，因此“navSelector”和“nextSelector”的 jquery 无限滚动功能没有任何用处

所以把它们放在一起。

您需要做的第一件事是摆脱两个相互冲突的 InfiniteScroll 脚本。

然后你需要在你的主题代码中添加导航链接，这样你才能正确使用无限滚动功能（它需要知道下一页的链接是什么）。

示例：将其插入主题代码中的某个位置，但请确保它没有被困在 {block:Posts} 或 {block:PermalinkPage} 等内容中。

{block:Pagination}
    <div id="pagination" style="display:none;">
        {block:PreviousPage}<a id="previous_page" href="{PreviousPage}">previous</a>{/block:PreviousPage}
        {block:NextPage}<a id="next_page" href="{NextPage}">next</a>{/block:NextPage}
    </div>
{/block:Pagination}

之后，您需要修复您的 JS 代码以正确引用页面上实际存在的元素。

示例：

<script type="text/javascript">
$(document).ready(function(){
    var $wall = $('#posts');
    $wall.imagesLoaded(function(){
        $wall.masonry({
            itemSelector: '.post',
            isAnimated : false
        });
    });

    $wall.infinitescroll({
        navSelector : '#pagination', 
        nextSelector : '#next_page', 
        itemSelector : '.post'
    },
    function( newElements ) {
        var $newElems = $( newElements );
        $newElems.hide();
        $newElems.imagesLoaded(function(){
            $newElems.fadeIn('slow');
            $wall.masonry( 'appended', $newElems, false );
        });
    });
});
</script>