Javascript 砖石重叠Tumblr照片集

我一直在尝试使用砌体和ImagesLoaded创建一个包含3列的Tumblr布局。然而，我有问题的照片重叠。我也在使用PXU Photoset

问题：

在最初的几秒钟内，博客看起来已崩溃：

然后，将其固定到已排序的列中：

此外，重叠只发生在photosets文章中。任何其他类型的帖子（包括只有一张图片的帖子）都可以

我的代码：

到目前为止，这是最适合我的代码，但产生了我之前说过的问题：

var $container = $('#threeCol');

$container.masonry({
      itemSelector: ".post",
      transitionDuration: 0
    });

$(document).ready(function(){
   $('.photo-slideshow').pxuPhotoset({
       lightbox: true,
       rounded: false,
       gutter: '0px',
       borderRadius: '0px',
       photoset: '.photo-slideshow',
       photoWrap: '.photo-data',
       photo: '.pxu-photo'}, function () {
          $container.imagesLoaded(function(){
            $('#threeCol').masonry({
                percentPosition: true,
                columnWidth: '.post',
                itemSelector: '.post',
                gutter:20,
                resize: true
            },
            function() { 
                $('#threeCol').masonry({ 
                    appendedContent: $(this) 
                }); 
            });
        }).resize();

        $('.post img').imagesLoaded(function() {
            $('#threeCol').masonry({
                percentPosition: true,
                columnWidth: '.post',
                itemSelector: '.post',
                gutter:20,
                resize: true
            }).resize();
        });

    });
});

在这里，threeCol是我的容器，post是我想要放在网格中的每个单独的post

另外，我没有使用InfiniteScroll

目标：

我想为内容加载速度快，而不是看起来破碎的第一秒加载

我已经试过了：

由于我已经处理这个问题好几天了，我已经尝试了几件事

$(window).load(...);

这在我当前的代码中根本不起作用。当它工作时，速度非常慢，用户体验也很差

关于其他有解决方案的帖子，我尝试了很多，包括：

和GitHub上的其他链接，我再也找不到了

感谢您阅读我的问题，欢迎您的帮助

编辑：

我的问题不同于以前的几个问题，因为我的问题是Photoset（由两个或多个图像组成的组，位于同一帖子上，因此属于同一网格元素），而不是单个图像。我也不知道每张照片中有多少张图片，我也不知道它们的大小

---

照片集是Tumblr内部的一种帖子。

可能重复@Phpdevpad No，这不是重复。我用更多的细节编辑了我的问题。我的问题是Photoset（由两个或多个图像组成的组放在同一篇文章上，因此，它们是同一网格元素的一部分）而不是单个图像。我也不知道每个photoset中有多少图像，也不知道它们的大小，因此您链接的答案不适用于我的问题。如果您可以阅读我的答案，我将使用“查找”功能选择图像属性。“我想你也可以这么做。”Phpdevpad我已经阅读并尝试了你对另一个主题的答案，但它不起作用。你也应该考虑比在照片中，图像可以并排，而不是一个在另一个。我也不知道这些图片是如何排列的（并排的，一个在另一个下面的，或者两者的混合）。对不起，我帮不上忙。“图像是ser”是什么意思？find函数提供图像属性！