0

我正在尝试根据我下载的模板中的代码使用同位素。代码看起来不错，但我的图像在页面加载时没有正确“砌筑”。它们似乎只左对齐和右对齐。

如果我点击我的过滤器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 的图像。

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

页面加载时的 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和以下 divtranslate在页面加载时具有错误的值，并且仅在我单击时才获得正确的值all。

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

有什么建议么？

4

2 回答 2

1

我在 Chrome (Mac) 上遇到了同样的问题，尽管在 Firefox (Windows) 中没有发生。

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

因此，只需将您的初始化包装在此顶部和底部的行中：

$(window).load(function(){
  $('#container').isotope({
    // options...
  });
});
于 2013-08-08T20:02:27.210 回答
0

你只需要添加.photos到你的project_container喜欢这样：

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

工作示例

于 2013-07-07T16:19:44.603 回答