2013年5月10日 星期五

瀑布流 plugin- jQuery Masonry

jQuery Masonry

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

外掛網址:
jQuery Masonry

照範例準備類似的html
  1. <div id="container">  
  2.   <div class="item">...</div>  
  3.   <div class="item">...</div>  
  4.   <div class="item">...</div>  
  5.   ...   
  6. </div>  

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

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

如果項目裡面有圖片,會因為圖片還沒讀完,高度會有問題,所以要用讀取圖片的方法。
  1. var $container = $('#container');   
  2. $container.imagesLoaded(function(){   
  3.   $container.masonry({   
  4.     itemSelector : '.item',   
  5.     columnWidth : 240   
  6.   });   
  7. });  

Demo

反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...