JQuery Masonry 在第一张图片后中断，加载奇怪的间隙

Question

我在 Tumblr 主题上使用 Infinite Scroll 实现 Masonry —— 我之前已经成功完成了一些事情，但我就是无法让这个停止“破坏”和分散图像。绝望了！

neuraldamage-theme4.tumblr.com 的现场演示（密码是访客）。

我已经尝试从 body 标记中删除除#posts div 及其内容（当然还有脚本）之外的所有内容，但问题仍然存在——所以这似乎不应该是周围环境的问题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

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

Answer 1

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

Answer 2

问题是这样的：

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

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

当我检查该元素时，我只是删除了 height 值，然后一切都移动到位。