使用加载了图像的砖石答案

【问题标题】：Using masonry with imagesloaded使用加载了图像的砖石
【发布时间】：2013-12-12 11:31:08
【问题描述】：

我是 js 新手，希望这个问题不会显得太愚蠢。

我正在为我的网站使用砖石 - 工作正常。我想让我的盒子在砌体完成装载时出现。在互联网上搜索，我发现有几篇文章建议使用 imagesloaded 插件来解决这个问题。它只是没有改变任何东西。这意味着：我的布局和内容框一直被弄乱，直到砌体完成加载，然后这些框突然跳到正确的位置。

我的代码：

$(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（如果 imagesloaded 已经包含在砌体中，我找不到任何信息，有些人写道它不再包含 - 令人困惑）：

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

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

【问题讨论】：

标签： javascript css jquery-masonry

【解决方案1】：

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

关于堆叠图像的问题：问题不在于 imagesLoaded 也不在于 Masonry。在您的代码中，imagesLoaded 正在等待所有图像加载完毕，然后触发砌体。加载所有图像后，Masonry 插件可以正确定义它们的大小并放在网格上。在此之前，浏览器像往常一样加载图像并根据定义的 CSS 显示它们，这就是它们被搞砸的原因。

一种可能的解决方案是默认隐藏元素，然后在 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
    });    
  });
});

【讨论】：

谢谢莱格。这对我帮助很大。我只是将 .box 默认隐藏在 css (display:none) 中，并让它按照您使用 jquery fadeIn 的建议出现。否则它总是会出现一毫秒，然后再次隐藏。
.打包（缩小）版本对我有用：imagesloaded.desandro.com/imagesloaded.pkgd.min.js

【解决方案2】：

另一个解决方案是在 $(window).load() 而不是 $(document).ready() 中初始化 Masonry。这将在页面上的所有媒体（图像、字体、外部脚本和样式表等）加载后触发 Masonry。

$(window).load(function(){
    $('#container').masonry({
        // options...
    });
});

【讨论】：

我正在使用无限滚动，有没有办法在页面上的所有媒体加载后由砖石处理动态附加的html？
这不适用于动态内容。 $(window).load 只会触发一次。

【解决方案3】：

安装

npm install masonry-layout --save

npm install imagesloaded --save

那么 vanilla js 选项将是

'use strict'

const Masonry = require('masonry-layout')
const imgloaded = require('imagesloaded')
const elem = document.querySelector('.grid')
var imgLoad = imgloaded( elem )
    function onAlways() {
        const msnry = new Masonry( elem, {
            // options
            columnWidth: '.grid-sizer',
            // do not use .grid-sizer in layout
            itemSelector: '.grid-item',
            percentPosition: true,
            gutter: 10
        })
    // console.log('all images are loaded')
}
if (elem) {
    // bind with .on()
    imgLoad.on( 'always', onAlways )
    // unbind with .off()
    // imgLoad.off( 'always', onAlways )
}

然后检查控制台是否已加载所有图像。

【讨论】：