1

I made some combination between the old code and the new one but it still doesnt work properly as some posts still overlap. They might not overlap for a smaller resolution tho, so here's an image, and you can see the site here.

the sources:

<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>

and the code:

$(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 );
            });}
);
});
4

2 回答 2

0

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

于 2018-02-27T16:31:24.363 回答
0

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

于 2017-04-09T00:16:34.203 回答