瀑布流 plugin- jQuery Masonry

最近有做瀑布流網站的需求，就找了這個plugin，用起來超方便的，比之前研究了半天自己寫出來的還好(泣)

外掛網址:
jQuery Masonry

照範例準備類似的html

view plaincopy to clipboardprint

1. <div id="container">  
2.   <div class="item">...</div>  
3.   <div class="item">...</div>  
4.   <div class="item">...</div>  
5.   ...   
6. </div>  

主要要有把每一個項目包起來的元素，而每一個項目可以照自己的意思設計樣式。

使用plugin

view plaincopy to clipboardprint

1. $(function(){   
2.   $('#container').masonry({   
3.     // options   
4.     itemSelector : '.item',   
5.     columnWidth : 240   
6.   });   
7. });  

如果項目裡面有圖片，會因為圖片還沒讀完，高度會有問題，所以要用讀取圖片的方法。

view plaincopy to clipboardprint

1. var $container = $('#container');   
2. $container.imagesLoaded(function(){   
3.   $container.masonry({   
4.     itemSelector : '.item',   
5.     columnWidth : 240   
6.   });   
7. });  

Demo