使用砌体并加载图像

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