0

我在 Tumblr 主题上使用 Infinite Scroll 实现 Masonry——这是我以前成功做过的事情，但我就是无法让这个停止“破坏”和分散图像。越来越绝望！

在neuraldamage-theme4.tumblr.com进行现场演示（密码是guest）。

除了#posts div及其内容（当然还有脚本）之外，我已经尝试从body标签中删除所有内容，但问题仍然存在——所以看起来这不应该是周围div的问题。

这是我的脚本：

$(document).ready(function() {
    $('#post-video iframe').attr('width', '300');   // resize embedded videos
});

var $container = $('#posts');

$container.imagesLoaded( function(){
    $container.masonry({
        itemSelector : '.post',
        columnWidth : 300
    });
});

$container.infinitescroll({
    navSelector  : '#pagination',    // selector for the paged navigation 
    nextSelector : '#pagination li a.pagination_nextlink',  // selector for the NEXT link (to page 2)
    itemSelector : '.post',     // selector for all items you'll retrieve
    loading: {
        finishedMsg: '',
        img: 'http://static.tumblr.com/6u5yyqj/iUtmgivzo/loading.gif',  // http://static.tumblr.com/6u5yyqj/iUtmgivzo/loading.gif, http://static.tumblr.com/6u5yyqj/yWkmgj1jq/loadingdark.gif
    }
    },
    // trigger Masonry as a callback
    function( newElements ) {
        var $newElems = $( newElements );
        $container.masonry( 'appended', $newElems );
    }
);

这是我嵌入的内容，只是确保它是最新的：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://static.tumblr.com/6u5yyqj/MPKmktfkv/jquery.masonry.min.js"></script>
<script src="http://static.tumblr.com/6u5yyqj/nsQmkth3k/jquery.infinitescroll.min.js"></script>

如果您想查看完整代码：gist.github.com/neuraldamage/5307289

如果有人能对此有所了解，我将不胜感激！

4

2 回答 2

0

问题是这样的：

<div id="posts" style="position: relative; height: 483px;" class="masonry">

更改该高度以适应您的内容（因为它不够大），或者根本不声明它。

当我检查该元素时，我只是删除了该height值，然后所有内容都已到位。

于 2013-04-06T05:56:30.017 回答
0

它遇到了一堆问题，因为您实际上<div id="posts">在页面上有多个。可能是您的 Tumblr 代码出现的问题超出了应有的范围。

于 2013-04-07T21:07:48.953 回答