0

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

问题：

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

然后，它固定到排序的列：http ://s16.postimg.org/i13qld4hh/no_Overlapping.jpg

此外，重叠仅发生在照片集帖子中。任何其他类型的帖子（包括只有一张图片的帖子）都可以正常工作。

我的代码：

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

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 内的一种帖子。

4

0 回答 0