要建立響應式瀑布流,可以使用jQuery插件:Grid-A-Licious
Grid-A-Licious 是一個簡單易用的 jQuery 插件,可用於創建響應式瀑布流布局,針對不同設備可自動適應寬度。你可以通過參數設置它的寬度以及動態顯示時的速度、延遲等等,定制性是比較高的。
如何使用
首先在 HTML 頁面頭部中引入 jQuery 框架和 Grid-A-Licious 插件
<script src="jquery.1.8.0.min.js"></script>
<script src="jquery.grid-a-licious.min.js"></script>
然後按如下方式添加內容,可自定義設置item樣式
<div id="demo">
<div class="item">
演示演示
</div>
....任意個div
<div class="item">
<div>測試內容...</div>
</div>
</div>
最後初始化即可
$("#demo").gridalicious({
gutter: 10,
width: 200,
animate: true,
animationOptions: {
speed: 150,
duration: 300,
complete: onComplete
},
});
使用說明和例子:http://suprb.com/apps/gridalicious/