我有 Masonry 插件和 Images Loaded 插件,但 imagesloaded 似乎无法正常工作。当我刷新页面时,div 重叠。只有在调整浏览器窗口的大小后,重叠才会自行纠正。有时刷新后它似乎确实有效......它非常随机。我是 jQuery 和 javascript 的新手。
我在这里托管了单个 html 页面,因此您可以看到我在说什么:masonry test
这是我正在初始化的方式,但是如果您查看上面链接的源代码,您可以看到完整的代码,因为问题可能出在其他地方。
$(document).ready(function() {
// Initialize Masonry
$('#content').masonry({
columnWidth: 320,
itemSelector: '.item',
isFitWidth: true,
isAnimated: true,
}).imagesLoaded(function() {
$(this).masonry('reload');
});
});
最佳答案
问题是 imagesLoaded()
在 masonry 插件完成初始化之前被调用。如果您查看测试页面上的浏览器控制台,您会看到一个错误。
看看 example在开发者网站上了解如何将 imagesLoaded 与砌体一起使用。您不应链接函数,而应等到图像加载后再初始化砌体。
$('#content').imagesLoaded(function() {
$('#content').masonry({
columnWidth: 320,
itemSelector: '.item',
isFitWidth: true,
isAnimated: true,
});
});
您可能能够按照您最初尝试的方式进行操作(即链接方法),但您不能在 imagesLoaded 函数中使用 $(this)
。这个函数是一个回调函数,所以它不是同步执行的。如果您将函数更改为
$('#content').masonry('reload');
它可能会按照你想要的方式工作,但我还没有测试过。
关于javascript - Masonry- div 与 imagesLoaded 插件重叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30809150/