使用 Masonry.js 时堆叠照片

Question

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

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

关于如何解决这个问题有什么建议吗？

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

Stacking photos when using Masonry.js