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