使用砌体并加载图像

Question

我是JS新手，希望这个问题看起来不太愚蠢。

我在我的网站上使用砖石结构-
效果很好。我想让我的盒子在砌筑完成时出现。在互联网上搜索时，我发现了几则建议使用图像加载的插件来解决此问题的帖子。它只是什么都没有改变。这意味着：我的布局和内容框一直被弄乱，直到砌筑完成加载为止，然后框突然跳到了正确的位置。

我的代码：

$(document).ready(function() {

    var $container = $('#post-area');
    $container.imagesLoaded( function() {
        $container.masonry({
            itemSelector : '.box',
            columnwidth: 300,
            gutter: 20,
            isFitWidth: true,
            isAnimated: !Modernizr.csstransitions
        });    
    });
});

我也收到此萤火虫错误：

TypeError: EventEmitter is not a constructor
ImagesLoaded.prototype = new EventEmitter();

我在网站结尾处像这样加载了imagesloaded js（如果砌筑中已经包含了imageloaded图像，我找不到任何信息，有些人写道它不再包含在内-
令人困惑）：

<script src="http://www.domainname.com/js/imagesloaded.js"></script>

如果有人可以帮助我，我将非常高兴。并告诉我imagesloaded是否是解决此问题的正确插件！

Answer 1

imagesLoaded不包含在Masonry中，因此您应该使用单独的plugin。我建议使用编译的.min版本。

关于堆叠图像的问题：问题不在imagesLoaded或Masonry中。在您的代码中，imagesLoaded等待所有图像加载完毕，然后发射砖石。加载所有图像后，Masonry插件可以正确定义其大小并放在网格上。在此之前，浏览器照常加载图像并根据定义的CSS显示’em，这就是为什么它们被弄乱了的原因。

一种可能的解决方案是默认情况下隐藏元素，然后在imagesLoaded确认图像已加载时淡入：

$(document).ready(function() {

  var $boxes = $('.box');
  $boxes.hide();

  var $container = $('#post-area');
  $container.imagesLoaded( function() {
    $boxes.fadeIn();

    $container.masonry({
        itemSelector : '.box',
        columnwidth: 300,
        gutter: 20,
        isFitWidth: true,
        isAnimated: !Modernizr.csstransitions
    });    
  });
});