Masonry 在多次调整大小之前无法正确显示图像

Question

这是我在 StackOverflow 上的第一个问题，所以请原谅我可能做出的任何失礼。

我花了几天时间试图自己解决这个问题，但没有成功。我尝试了在 stackoverflow 和其他地方找到的几个代码片段，以尝试解决该问题。

我正在使用 Skeleton 和 Masonry 的组合来构建我的作品集网站。当我最初加载作品集时，只有一张小图像。当我第一次调整大小时，它显示所有列，但图像重叠。当我再次调整大小时，大多数图块的高度都是正确的，但较长的图块（JSTOR）仍然被切断。在第三次调整大小（以及所有后续访问）时，图块会正确显示。

（（编辑：在页面刷新时（不再单击链接，而是浏览器刷新）网格也变得不稳定......有时显示所有列，但有些图像堆叠在一起，有时只显示一张小图片。））

我对 JS 或 jQuery 没有最透彻的理解，所以我的很多修复尝试可能都是笨拙的。我此时的假设是，masonry 在加载 hte 图像之前创建网格...我尝试了各种代码位来解决此问题，包括 Desandro 自己的图像加载片段和 StackOverflow 上的其他响应，例如 this one。

现在我的网站应该在 new.rdhalexander.com 上线。我不确定还需要什么其他信息......但我会密切关注这一点。

Answer 1

更新： 请参阅@Stefan 和他的示例。显然有一种新方法。

在砌体决定获取其尺寸之前，图像似乎尚未完全加载。

您可以使用一些简单的 css 测试，您可能会看到延迟加载，

.tile {
   position:relative !important;
}

并尝试长时间超时 类似的东西

setTimeout(function(){
  .. masonry blah ..
},1000);

然后解决时序问题，这是masonry作者建议的。

$(window).load( function(){   $('#content').masonry(); });

链接

Answer 2

如果有人从谷歌来到这里，除了手动强制调整大小事件之外，没有其他方法对我有用

window.dispatchEvent(new Event('resize'));

Answer 3

为什么你们都不使用 Masonry Layout 功能？

官方声明：

当某个项目的大小发生变化并且所有项目都需要改变时，布局非常有用 再次被布置。

所以一段时间后会重新初始化 Masonry。像这样你可以打电话给Masonry

ready

$grid = $('.grid-class').masonry();

setTimeout(function() {
  $grid.masonry('layout');
}, 500);

Answer 4

只是想知道我应该把这段代码放在哪里？

$grid = $('.grid-class').masonry();

setTimeout(function() {
  $grid.masonry('layout');
}, 500);

我还没有完全理解 javascript，当有人只是放置一小段代码时，我完全不知道它应该放在哪里？

您能在上下文中显示它吗？否则如何在没有上下文的情况下理解任何事情？