带有砖石和图像加载的无限滚动效果不佳（tumblr）答案

【问题标题】：infinite scroll with masonry and imagesloaded not working well (tumblr)带有砖石和图像加载的无限滚动效果不佳（tumblr）
【发布时间】：2017-04-01 16:18:40
【问题描述】：

我在旧代码和新代码之间做了一些组合，但它仍然不能正常工作，因为一些帖子仍然重叠。如果分辨率较小，它们可能不会重叠，所以这里有一个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 );
            });}
);
});

【问题讨论】：

标签： javascript tumblr infinite-scroll masonry imagesloaded

【解决方案1】：

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

【讨论】：

【解决方案2】：

这是旧的，但我在照片集和砖石方面遇到了类似的问题，而 chloe 的建议没有奏效。但是，还有另一种选择。 Tumblr 具有用实际照片替换 photoset 变量的功能，并且有人构建了一个插件来将它们重新组织成一个网格：Photoset Grid。该网页还提供了一个方便的教程，介绍如何将代码实现到 tumblr 主题中。

【讨论】：