我遇到了同位素问题。我使用它作为可过滤的画廊,但有时(并非所有时间),一些图像重叠。
http://www.rivka-photography.com/work/
每次都不会发生这种情况,您可能需要刷新页面才能看到问题。而目前我只在Mac上的Safari(最新版本)中见过它。我正在使用imagesLoaded,但它似乎还不够。我尝试了渐进式布局并等待加载所有图像。这是我目前的JS代码:
jQuery(document).ready(function ($) {
var $grid = $('.gallery-isotope').isotope({
itemSelector: '.gallery-item',
layoutMode: 'masonry'
});
$grid.imagesLoaded().progress(function() {
$grid.isotope('layout');
});
});
BTW这是一个Wordpress网站。感谢任何可以提供帮助的人。
答案 0 :(得分:1)
所以我想我弄明白了。我很确定问题来自Wordpress新的响应式图像大小功能(4.4中介绍)。我改变了图库代码,以控制输出的图像尺寸,现在它可以工作。
答案 1 :(得分:0)
尝试使用setTimeout()
。
jQuery(document).ready(function ($) {
var $grid = $('.gallery-isotope').isotope({
itemSelector: '.gallery-item',
layoutMode: 'masonry'
});
$grid.imagesLoaded().progress(function() {
setTimeout(function(){
$grid.isotope('layout');
},200);
});
});

答案 2 :(得分:0)
您是否尝试过他们建议的备用设置(http://isotope.metafizzy.co/layout.html#imagesloaded):
var $grid = $('.gallery-isotope').imagesLoaded( function() {
// init Isotope after all images have loaded
$grid.isotope({
itemSelector: '.gallery-item',
layoutMode: 'masonry'
});
});