Jquery imagesLoaded Plugin Overlapping Issue

Question

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

    <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. 您的页面在任何地方都没有导航链接，因此jquery infinitescroll函数没有用于“navSelector”和“nextSelector”

所以要把它们放在一起。

您需要做的第一件事是摆脱两个冲突的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>