jQuery響應式瀑布流佈局插件 - Grid-A-Licious

最近瀑布流佈局比較流行，那麼今天就給你們介紹一個這樣的 jQuery 插件 - Grid-A-Licious。

 

 

 

Grid-A-Licious 是一個簡單易用的 jQuery 插件，可用於建立響應式瀑布流佈局，針對不一樣設備可自動適應寬度。你能夠經過參數設置它的寬度以及動態顯示時的速度、延遲等等，定製性是比較高的。

如何使用

首先在 HTML 頁面頭部中引入 jQuery 框架和 Grid-A-Licious 插件

 

Html代碼  

1. <script src="http://kfxx.info/js/jquery.1.8.0.min.js"></script>  
2. <script src="http://kfxx.info/js/jquery.grid-a-licious.min.js"></script>  

而後按以下方式添加內容，可自定義設置item樣式  

Html代碼  

1. <div id="demo">  
2. <div class="item">  
3. 演示演示  
4. </div>  
5. ....任意個div  
6. <div class="item">  
7. <div>測試內容...</div>  
8. </div>  
9. </div>  

最後初始化便可

Js代碼  

1. $("#demo").gridalicious({  
2.     gutter: 10,  
3.     width: 200,  
4.     animate: true,  
5.     animationOptions: {  
6.         speed: 150,  
7.         duration: 300,  
8.         complete: onComplete  
9.     },  
10. });  

 

演示： demo