Jquery Isotope：製作水平砌體

Question

我正在嘗試使用JQuery Isotope構建水平版本的JQuery砌體。我希望我的結果看起來像這樣：

Layout-modes（點擊masonryHorizo​​ntal選項）。

按照網站說明： Masonry Horizontal 我的腳本是這樣的：

$('#isotopecontainer').isotope({ 
     itemSelector : '.item', 
     masonry : { 
      columnWidth : 270 
     } 
}); 

然而，兩件事情正在發生：

1）當頁面加載#isotopecontainer div的高度設置在60px，所以你只能看到.item股利頂部。

2）如果您調整瀏覽器的大小，#isotopecontainer div會展開，但.item div不會像示例一樣排列。

任何人都可以幫我指出正確的方向嗎？我的演示網站是here。

謝謝。

Answer 1

你演示的站點使用Firefox。

雖然，你說得對，但在Chrome中不是。問題很簡單。 您需要在圖像上設置寬度和高度屬性。否則，Chrome將它們加載爲0px高度（使容器具有行高值的默認高度），直到它們獲取文件。 Firefox不會採用這種方式，並在創建佈局之前等待圖片大小。

希望得到這個幫助！

Answer 2

#isotophecontainer有overflow: hidden。刪除它會顯示Chrome中的所有圖像。

Answer 3

您需要添加layoutMode：'masonryHorizo​​ntal'，否則它將無法工作。像這樣：

$('#isotopecontainer').isotope({ 
    itemSelector : '.item', 
    layoutMode: 'masonryHorizontal', 
    masonry : { 
     columnWidth : 270 
    } 

}）;