使用带有imagesloaded的砌体

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错误:

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中,因此您应该使用单独的插件.我建议使用编译的.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...
    });
});