Question

我遇到了同位素问题。我使用它作为可过滤的画廊，但有时（并非所有时间），一些图像重叠。

每次都不会发生这种情况，您可能需要刷新页面才能看到问题。而目前我只在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网站。感谢任何可以提供帮助的人。

Answer 1

所以我想我弄明白了。我很确定问题来自Wordpress新的响应式图像大小功能（4.4中介绍）。我改变了图库代码，以控制输出的图像尺寸，现在它可以工作。

Answer 2

尝试使用setTimeout()。

＆＃13;

jQuery(document).ready(function ($) {
    var $grid = $('.gallery-isotope').isotope({
        itemSelector: '.gallery-item',
        layoutMode: 'masonry'
    });

    $grid.imagesLoaded().progress(function() {
      setTimeout(function(){
        $grid.isotope('layout');
      },200);
    });
});

＆＃13;

Answer 3

您是否尝试过他们建议的备用设置（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'
  });
});

同位素图像重叠

3 个答案: