アイソトープ重複画像？

Question

それはFirefoxやSafariでのみ起こるようです。私は基礎的な応答フレームワークでそれを使用しているので、高さの設定について何をすべきか分かりません。 Chrome/Safariの画像間に十分なスペースがないようです。

これを修正するにはどうすればよいですか？

編集：それは私がいる問題を表示していないようであるということでここで私はそのことについて何をすべきかわからないんだけど...フィドルhttp://jsfiddle.net/TLjay/

問題..です私はアイソトープ以外のすべての機能を無効にしようとしました。すべてのjquery/cssとChrome/Safariの画像はまだ縮小されていますが、Firefoxの画像は縮小されています。

私は、フィルタの下に「すべて」をヒットした場合も、それは私がそのは十分に与えて、それがimagesLoadedで動作するようになったどのように

これを考え出すのに役立つ可能性が見てその考えるのがページを伸ばしそのように仮定どこスペースが、画像の左右のスペースは、ブラウザがキャッシュされた画像を使用するので、私のスクリプトは

<script type="text/javascript"> 
    var $container = $('.isosort') 
    // initialize Isotope 
     $container.isotope({ 
      // options... 
      resizable: false, // disable normal resizing 
      layoutMode : 'fitRows', 
      animationEngine : 'best-available', 

      // set columnWidth to a percentage of container width 
      masonry: { columnWidth: $container.width()/5 } 
     }); 

     // update columnWidth on window resize 
     $(window).smartresize(function(){ 
      $container.isotope({ 
      // update columnWidth to a percentage of container width 
      masonry: { columnWidth: $container.width()/5 } 
      }); 
     }); 
     $container.imagesLoaded(function(){ 

       $container.isotope({ 
      // options... 
       }); 
     }); 

     $('#filters a').click(function(){ 
      var selector = $(this).attr('data-filter'); 
      $container.isotope({ filter: selector }); 
      return false; 
     }); 
    </script> 

Answer 1

更新（オリジナルの答えが間違っていたの下で...まだない..です）

問題は画像が読み込まれず、計算が失敗するようです。

それを取得するので（をあなたはそれがなぜ起こるか

がhttp://jsfiddle.net/TLjay/2/

---

わからないを参照してください...期待通りに動作しているよう $(window).load(function(){ ..... });にISOTOPコードをラップするが、簡単な回避策がある場合一度 のウィンドウのサイズを変更すると固定） resizeを手動で呼び出します。

ので、ちょうどあなたのコードの末尾に $(window).resize();を追加すると、それを修正します。.. http://jsfiddle.net/TLjay/1/

Answer 2

で

デモあなたはアイソトープメソッドを呼び出す前に、あなたはすべてのimagessをプリロードすることを確認する必要があり、ここで現実の世界のデモがありますこれはhttp://gbin1.com/gb/demoviewer/360/06242ba0-40a1-45fd-946f-cc89e0df64c9/index.html.htmの場合は、jquery.imagesloaded.min.jsプラグインで画像をプリロードしてからisotopeを呼び出すと、コンテンツは重複しません。

Answer 3

imagesLoadedは、現在含まれている要素に含まれる画像を確認することで動作します。したがって、あなたの場合、$（window）.load（）にはその要素に項目がないので、実際には何もしません。代わりに、アイテムを$ .ajax.successで挿入した後で、画像をトリガすることをおすすめします。

success: function(data){ 
    // Update isotope container with new data. 
    $container.isotope('remove', $container.data('isotope').$allAtoms) 
    $container.isotope('insert', $(data)) 
     // trigger isotope again after images have been loaded 
     .imagesLoaded(function() { 
     $container.isotope('reLayout'); 
     }); 
    } 
});