Question

我是一名新手，并希望这些问题看起来并不太愚蠢。

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

我的代码：

$(document).ready(function() {

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

我也得到了这个firebug-error：

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

我正在我的网站末尾加载像这样的imagesloaded（如果imagesloaded已经包含在砌体中，我找不到任何信息，有些人写道它不再包含在内 - 令人困惑）：

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

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

Answer 1

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

关于堆叠图像的问题：问题不在图像中，也不是砌成的。在你的代码中，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
    });    
  });
});

Answer 2

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

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

Answer 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 )
}

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

使用带有imagesloaded的砌体

3 个答案: