0

我遇到问题的页面在：http: //forkfox.com/tours

如果您刷新页面的次数足够多，通常是在第二次甚至是第一次加载页面时，您会看到一些框相互重叠。

JS

var container = document.querySelector('#alltours');
var msnry = new Masonry( alltours, {
  // options
  itemSelector: '.box',
});

如果您需要任何其他信息来帮助解决此问题，请告诉我。

谢谢！

编辑1：我添加了imagesLoaded，如下所示，但我似乎仍然遇到同样的问题。

// or with jQuery
// initialize Masonry
var $container = $('#alltours').masonry();
// layout Masonry again after all images have loaded
$container.imagesLoaded( function() {
  $container.masonry();
});
4

2 回答 2

2

您在页面上遇到此错误：Uncaught TypeError: Object [object Object] has no method 'imagesLoaded'

首先要做的实际上是在你的脚本中包含 imagesLoaded 来加载： http ://desandro.github.io/imagesloaded/

使用标签下载并包含它。在最近的一个版本中，它不再作为 Masonry 的一部分包含在内。此外，我会从您的 .box div 中删除浮动，并允许 Masonry 控制定位。由于砌体将绝对定位您的浮子没有任何影响。

.thumbnail a { 给出块的显​​示类型。可能导致高度计算错误。

于 2013-10-14T23:05:42.690 回答
1

这可能是 Chrome 激进缓存的问题。您可能想看看https://github.com/desandro/imagesloaded。

imagesLoaded( document.querySelector('#alltours'), function( instance ) {
  // Call Masonry here...
});

但是由于您已经在使用 jQuery：

$('#alltours').imagesLoaded( function() {
  // Call Masonry here...
});

让我知道这有帮助。

于 2013-10-13T02:50:56.573 回答