tumblr - Jquery imagesLoaded Plugin Overlapping Issue

Question

I have a tumblelog that uses jquery masonry and infinite scrolling on the posts. The masonry only applies to the first few posts, then overlaps everything else. I know this kind of question gets asked a lot, but no one seems to know the answer. Here's my code:

    <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. Thanks!

score 3 · Accepted Answer

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

你有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>

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

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

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

您在脚本中引用的一些元素甚至在您的页面上都不存在：
1. '.masonryWrap' 不存在
2. “#navigation”不存在
3. 'a#nextPage' 不存在
您的页面在任何地方都没有导航链接，因此对于“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>

tumblr - Jquery imagesLoaded Plugin Overlapping Issue

1 回答 1

Related

Reference