Question

我一直在尝试使用Masonry和ImagesLoaded创建一个包含3列的Tumblr布局。但是，我有关于照片重叠的问题。我也使用PXU Photoset。

问题：

在第一秒钟内，博客看起来很糟糕：http://s11.postimg.org/ry4fa614j/Overlapping.jpg

然后，它修复了已排序的列：http://s16.postimg.org/i13qld4hh/no_Overlapping.jpg

此外，重叠发生仅与photosets帖子。任何其他类型的帖子（包括只有1张图片的帖子）都可以正常使用。

我的代码：

到目前为止，这是对我来说效果最好的代码，但产生了我之前说过的问题：

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 是我想要在网格中放置的每个帖子。

另外，我不使用InfiniteScroll。

目标：

我希望内容加载速度快，而不是在加载的第一秒看起来破碎。

我已经尝试过：

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

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

根据我当前的代码，这根本不起作用。当它工作时，它非常慢，用户体验也很糟糕。

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

GitHub上的其他人以及我无法再找到的链接。

感谢您阅读我的问题，非常欢迎任何帮助！

修改

我的问题与以前的几个不同，因为我的问题是照片集（两个或更多图像的组合在同一个帖子上，因此，它们是相同网格元素的一部分）而不是单个图像。我也不知道每张照片中有多少张图片，我也不知道它们的尺寸。

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

砌体重叠Tumblr照片

0 个答案: