0

ダウンロードしたテンプレートのコードに基づいて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 を持つ画像のみが表示されます。

メソッドに従って 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 に答える