Question

我正在尝试根据我下载的模板中的代码使用Isotope。代码看起来很好，但我的图像在页面加载时没有正确“拼接”。它们似乎只是左右对齐。

如果我点击我的过滤器all，则砌体触发并且照片正确对齐。

我的过滤器如下所示：All / filter 1 / filter 2 / filter 3

这是我正在使用的JS代码：

var $container = $('#project_container'), $filters = $("#filters a");

$container.imagesLoaded( function(){
    $container.isotope();
});

// filter items when filter link is clicked
$filters.click(function() {
    $filters.removeClass("active");
    $(this).addClass("active");
    var selector = $(this).data('filter');
    $container.isotope({ filter: selector });
    return false;
});

我也试过了：

$container.imagesLoaded( function(){
    $container.isotope({ filter: '*' });
    return false;
});

但那也没有用。如果我将*替换为.filter1，则页面加载仅显示具有filter1的图像。

如何根据masonry方法触发Isotope对齐图像？

页面加载时的HTML：

<div id="project_container" style="position: relative; overflow: hidden; height: 1223px;" class="isotope">

  <div class="photo industri isotope-item" style="position: absolute; left: 0px; top: 0px; transform: translate(0px, 0px);">
    <img alt="Vaskeriet" class="attachment-medium wp-post-image" src="(...)/vaskeriet1-570x633.jpg">
  </div>

  <div class="photo naeringsbygg isotope-item" style="position: absolute; left: 0px; top: 0px; transform: translate(570px, 0px);">
    <img alt="Otto Moe" class="attachment-medium wp-post-image" src="(...)/ottomoe1-570x272.jpg">
  </div>

  <div class="photo institusjoner isotope-item" style="position: absolute; left: 0px; top: 0px; transform: translate(1140px, 0px);">
    <img alt="Namsos sykehjem" class="attachment-medium wp-post-image" src="(...)/sykehjem2-570x733.jpg">
  </div>

  <div class="photo arealplanlegging isotope-item" style="position: absolute; left: 0px; top: 0px; transform: translate(570px, 381px);">
    <img alt="Kulturparken" class="attachment-medium wp-post-image" src="(...)/kultur1-570x733.jpg">
  </div>
</div>

点击All后，以下内容发生了变化：

div id =“project_container”：height: 523px;
div class =“naeringsbygg”：translate(295px, 0px)
div class =“institusjoner”：translate(590px, 0px)
div class =“arealplanlegging”：translate(295px, 146px)

因此，当加载页面时，容器属性top和以下div translate似乎具有错误的值，并且当我点击all时只获得正确的值。

所以我想知道如何在页面加载时分配正确的值。

有什么建议吗？

Answer 1

我在Chrome（Mac）上遇到了同样的问题，尽管在Firefox（Windows）中没有这样的问题。

使用找到的$(window).load()解决方案here。

所以只需将初始化包装在此的顶部和底部：

$(window).load(function(){
  $('#container').isotope({
    // options...
  });
});

Answer 2

您只需将.photos添加到project_container，就像这样：

<div id="project_container" class="isotope photos">

<强> Working Example

同位素不会在页面加载时触发masonery

2 个答案: