Question

我在旧代码和新代码之间做了一些组合，但它仍然无法正常工作，因为有些帖子仍然重叠。对于较小的分辨率，它们可能不会重叠，所以这里只有image，您可以看到网站here。

来源：

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-infinitescroll/2.0b2.120519/jquery.infinitescroll.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/masonry/3.1.2/masonry.pkgd.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.0.4/jquery.imagesloaded.min.js"></script>

和代码：

$(window).load(function () {
    var $container = $('#posts');
$container.masonry(),
$container.infinitescroll({
navSelector : "div.navigation",
// selector for the paged navigation (it will be hidden)
nextSelector : ".navigation a#next",
// selector for the NEXT link (to page 2)
itemSelector : ".entry",
// selector for all items you'll retrieve
bufferPx : 10000,
extraScrollPx: 10000,
loadingImg : "http://static.tumblr.com/bcpenwm/o5Nmy3k0o/florels.gif",
loadingText : "<em></em>",
},
// call masonry as a callback.
  function( newElements ) {
            // hide new items while they are loading
            var $newElems = $( newElements ).css({ opacity: 0 });
            // ensure that images load before adding to masonry layout
            $newElems.imagesLoaded(function(){
                // show elems now they're ready
                $newElems.animate({ opacity: 1 });
                $container.masonry( 'appended', $newElems, true );
            });}
);
});

Answer 1

你的代码很好，问题在于tumblr的photoset变量。 Tumblr生成一个iframe，并且砌体无法抓住它的高度为它留出空间。而是使用Pixel Union's extended photosets之类的东西。这会将照片加载为图像，然后砌体可以抓住它们的高度。

Answer 2

这已经过时了，但是我遇到了类似的照片和砌体问题，克洛伊的建议没有用。但是，还有另一种选择。 Tumblr具有用实际照片替换photoset变量的功能，而有人已经构建了一个插件来将它们重新组织成网格：Photoset Grid。该网页提供了一个方便的教程，介绍如何将代码实现为tumblr主题。

砌体无限滚动，图像加载效果不佳（tumblr）

2 个答案: