使用 Masonry.js 时堆叠照片

【问题标题】：Stacking photos when using Masonry.js使用 Masonry.js 时堆叠照片
【发布时间】：2018-04-24 20:09:22
【问题描述】：

我几乎每次在我的网站上使用 masonry.js 时都会遇到这个问题。页面完全加载后，图库中的图像如下所示：

为了解决这个问题，我需要刷新页面以正确排列图像，如下所示：

关于如何解决这个问题的任何建议？

【问题讨论】：

这是因为在砌体试图计算布局时无法访问图像尺寸。加载图像时，您将需要运行或重新计算。分享一个最小的、具体的和可验证的例子。分享没有任何代码的屏幕截图是没有帮助的。

【解决方案1】：

在初始化砌体网格之前，您可以使用 imagesLoaded 库检查是否所有图像都已加载。

Wordpress 自带 imagesLoaded，您只需将其放入主题中即可。

wp_enqueue_script( 'imagesLoaded' );

然后在您的 javascript 中，您可以像这样执行 if 语句：

$('#container').imagesLoaded( function() {
  // images have loaded, initialise masonry grid.
});

Masonry 库还有一个 .layout 方法，用于布置所有项目元素。当项目的大小发生变化时很有用。

// jQuery
$grid.masonry('layout')
// vanilla JS
msnry.layout()

【讨论】：