同位素图像重叠

时间:2016-02-17 11:21:48

标签: javascript jquery wordpress jquery-isotope isotope

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

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网站。感谢任何可以提供帮助的人。

3 个答案:

答案 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'
  });
});