javascript - 使用 Masonry.js 时堆叠照片

Question

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

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

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

标签： javascriptjqueryhtmlwordpressmasonry

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

https://imagesloaded.desandro.com/

https://masonry.desandro.com/methods.html