无限滚动砌体和imagesloaded装载不好（tumblr）

我做了旧代码和新的代码之间的一些组合，但它仍然无法正常工作，因为一些帖子仍然重叠。它们可能不会在较小的分辨率下重叠，因此这里是image，您可以看到该网站here。无限滚动砌体和imagesloaded装载不好（tumblr）

来源：

<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); 
      });} 
); 
});

来源

2017-04-01 Johhhn Doe

你的代码是正确的，问题在于tumblr的photoset变量。 Tumblr生成一个iframe，砌体无法抓住它的高度为它留下空间。而应使用类似Pixel Union's extended photosets的东西。这将图片加载到图片中，砌体就可以抓住它们的高度。

来源

2017-04-09 00:16:34 chloe784

这是旧的，但我有一个类似的问题，photosets和砌体和chloe的建议是行不通的。但是，还有另一种选择。 Tumblr具有将实际照片替换为photoset变量的功能，而有人已经构建了一个插件将它们重新组织为网格：Photoset Grid。该网页提供了一个关于如何将代码实现为tumblr主题的方便教程。

来源

2018-02-27 16:31:24

尽管此链接可能会回答问题，但最好在此处包含答案的重要部分，并提供供参考的链接。如果链接页面更改，则仅链接答案可能会失效。 - [来自评论]（/ review/low-quality-posts/18952448） –

无限滚动砌体和imagesloaded装载不好（tumblr）

回答

相关问题