同位素图像重叠答案

【问题标题】：Isotope images overlapping同位素图像重叠
【发布时间】：2026-02-14 06:10:01
【问题描述】：

我遇到了 Isotope 的问题。我将它用于可过滤的画廊，但有时（并非所有时间），一些图像重叠。

并非每次都会发生，您可能需要刷新页面才能看到问题。目前我只在 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');
    });
});

顺便说一句，这是一个 Wordpress 网站。感谢任何可以提供帮助的人。

【问题讨论】：

标签： javascript jquery wordpress jquery-isotope

【解决方案1】：

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

【讨论】：

我试过了。大部分时间都可以正常工作，但有时图像会重叠。很烦人。

【解决方案2】：

所以我想我想通了。我很确定问题来自 Wordpress 新的响应式图像大小功能（在 4.4 中引入）。我更改了图库代码以控制输出的图像大小，现在它可以工作了。

【讨论】：

非常好，您解决了这个问题，我认为您对问题所在是正确的...但是您愿意与世界分享您是如何解决它的吗？跨度>

【解决方案3】：

试试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);
    });
});

【讨论】：

感谢您的宝贵时间。我尝试了您的解决方案，但它没有解决问题。通常布局很好，但有时图像仍然重叠。