在多次调整大小之前，砌体无法正确显示图像答案

【问题标题】：Masonry not displaying images correctly until several resizes在多次调整大小之前，砌体无法正确显示图像
【发布时间】：2013-08-19 16:07:52
【问题描述】：

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

我花了几天时间试图自己解决这个问题，但无济于事。我已经尝试了在 stackoverflow 和其他地方找到的几个 sn-ps 代码，以尝试解决问题。

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

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

我对 JS 或 jQuery 没有最透彻的了解，所以我的很多修复尝试可能都很笨拙。在这一点上，我的假设是砌体在加载 hte 图像之前创建网格......我已经尝试了各种代码位来解决这个问题，包括 Desandro 自己的 imageload sn-p 和 StackOverflow 上的其他响应，如this one。

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

【问题讨论】：

标签： javascript jquery-masonry

【解决方案1】：

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

在 masonry 决定获取它们的尺寸之前，图像似乎还没有完全加载。

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

.tile {
   position:relative !important;
}

并尝试长时间超时像

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

那么要解决时间问题，这是masonry的作者建议的。

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

link

【讨论】：

我采用了您给出的最后一行并围绕它重新编写了我的脚本。一旦我意识到我会用我的具体论点替换“$（'#content'）.masonry（）”......我认为它有效！非常感谢......我觉得有点傻，因为一旦我用更批判的眼光看待它，我尝试过但没有奏效的东西。谢谢。
Ace...在那里挠头太久了。
@Dylan 请在 2020 年更新您的答案 :-) 例如，您有我的答案

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

官方声明：

当一个项目改变了大小并且所有项目都需要改变时，布局很有用重新布置。

所以这会在一段时间后重新启动 Masonry。像这样你可以打电话给 Masonry ready

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

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

【讨论】：