砌体问题 - 图像首先垂直加载，然后重新排列。答案

【问题标题】：Issue with Masonry - Images load vertically at first, then rearrange.砌体问题 - 图像首先垂直加载，然后重新排列。
【发布时间】：2017-07-27 16:53:47
【问题描述】：

示例 - http://paulmatheson.net/photography/nature.html

我的砌体代码：

<script type="text/javascript">
var $container = jQuery('#masonry-grid'); 
$container.imagesLoaded(function() {
  $container.masonry({
    columnWidth: 240,
    gutter: 10,
    itemSelector: '.grid-item'
  });
  $container.imagesLoaded.done( function(instance) {
    $container.masonry('layout');
  });
});

我是不是叫错了？

【问题讨论】：

标签： javascript html jquery-masonry masonry

【解决方案1】：

已编辑 您的$container.imagesLoaded.done 函数不正确，它是$container.imagesLoaded().done。它也在$container.imagesLoaded(function() 内，它不应该在。您不需要像这样调用 imagesloaded 两次并再次布局砌体..

您在此处加载的原始图片代码：

var $container = jQuery('#masonry-grid'); 
$container.imagesLoaded(function() {
$container.masonry({
columnWidth: 240,
gutter: 10,
itemSelector: '.grid-item'
});
$container.imagesLoaded.done( function(instance) {
$container.masonry('layout');
});
});

需要：

var $container = jQuery('#masonry-grid'); 
$container.imagesLoaded(function() {
$container.masonry({
columnWidth: 240,
gutter: 10,
itemSelector: '.grid-item'
});

}); 我还建议在 masonry.js 之前加载 imagesloaded.js

如果你真的必须使用 done 方法，你可以使用这个代码：

var $container = jQuery('#masonry-grid'); 
$container.imagesLoaded(function() {
$container.masonry({
columnWidth: 240,
gutter: 10,
itemSelector: '.grid-item'
});

}).done( function(instance) {
$container.masonry('layout');
});

【讨论】：

我已经更改了代码 - 但我很难判断它是否有效。你能验证吗？它看起来仍然像垂直加载，尽管速度要快得多。
嗯，我一定是做错了什么。例如，在此处查看图像更大的位置，因此效果更明显 - paulmatheson.net/design.html 我将代码更改为您推荐的代码，问题仍然存在。
我不确定你为什么要加载砖石，然后在 .done() 上进行额外的布局。你试过没有 done 函数的代码吗？
这可能不是您的问题的一部分，但您的砖石容器具有相同的 ID，id="masonry-grid"。 id 必须始终是唯一的，只有类可以多次使用。您的每个网格都必须有不同的 id。
我只想指出.grid-item 有背景。 { background-color: #373c48; } 这个背景颜色可能是操作 @pmath325 在 masnory 布局触发之前加载图像时看到的颜色。