在多次调整大小之前,砌体不能正确显示图像

时间:2013-08-19 16:07:53

标签: javascript jquery-masonry

这是我关于StackOverflow的第一个问题,所以请原谅我可能做出的任何失误。

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

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

((编辑:在页面刷新(不再点击链接,但浏览器刷新)网格也变得很糟糕....有时显示所有列但有些图像是堆叠的,有时只显示1张小图片。))

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

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

3 个答案:

答案 0 :(得分:7)

似乎在砌体决定获得尺寸之前图像还没有完全加载。

你可以用一些简单的CSS 测试,你可能会看到延迟加载,

.tile {
   position:relative !important;
}

并尝试长时间超时

之类的东西
setTimeout(function(){
  .. masonry blah ..
},1000);

然后解决时间问题,这就是砌体作者所说的。

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

link

答案 1 :(得分:2)

如果有人从谷歌到达这里,除了手动强制调整大小事件外没有别的办法对我有用

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

答案 2 :(得分:0)

为什么所有人都不使用Masonry Layout 功能?

官方声明:

  

当项目的尺寸已更改并且所有项目都需要更改尺寸时,布局很有用   重新布置。

所以这会在一段时间后重新启动砌体。这样,您可以在ready

上呼叫石工
$grid = $('.grid-class').masonry();

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