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

Masonry not displaying images correctly until several resizes

本文关键字：图像 显示图 显示 调整 几次 Masonry      更新时间：2023-09-26

这是我在StackOverflow上的第一个问题，所以请原谅我可能犯的任何错误。

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

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

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

我对JS或jQuery没有最彻底的理解，所以我的很多修复尝试可能都很笨拙。在这一点上，我的假设是砖石结构在加载图像之前创建网格。。。我已经尝试了各种代码来修复这个问题，包括Desandro自己的imageload片段和StackOverflow上的其他响应，比如这个。

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

更新：参考@Stefan和他的例子。显然有一种新的方法。

在砖石决定确定尺寸之前，图像似乎还没有完全加载。

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

.tile {
   position:relative !important;
}

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

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

然后为了解决时间问题，这就是《砖石》一书的作者所建议的。

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

链接

如果有人从谷歌来到这里，除了手动强制调整大小事件外，其他任何事情都对我无效

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

为什么不都使用MasonyLayout功能？

官方声明：

当项目的大小发生变化，并且所有项目都需要重新布置。

所以这个重新命名砌体一段时间后。像这样，你可以在ready 上调用Masonry

$grid = $('.grid-class').masonry();
setTimeout(function() {
  $grid.masonry('layout');
}, 500);
相关文章：