同位素重疊圖像？

Question

它似乎只發生在Chrome和Safari ..不是Firefox。我在基礎響應框架中使用它，所以我不知道如何設置高度。它似乎也沒有足夠的間距在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

更新（原來的答案是錯的，因爲瀏覽器使用的緩存圖片..）

問題似乎是圖像未加載，計算失敗。

如果您纏繞ISOTOP代碼$(window).load(function(){ ..... });似乎按預期工作..

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

---

不知道爲什麼會發生，但一個簡單的解決方法是（ 因爲它得到一旦您調整窗口大小）手動調用 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插件預載圖像，然後調用同位素，內容不會重疊。

Answer 3

imagesLoaded通過檢查包含元素中當前的圖像來工作。所以在你的情況下，它實際上並沒有在$（window）.load（）中做任何事情，因爲該元素中沒有任何項目。相反，我會建議在使用$ .ajax.success插入項目後再次觸發imagesLoaded。

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