Macy.js 網頁流布局JS插件,僅4KB大小
花瓣網我想大家都知道了吧,它就是使用流布局來展示圖片,這種排版方式特別適合展現大量圖像的頁面,如果你也想加入這種排版,可以試試今天分享給大家的 Macy.js 插件。
這款流布局JS插件僅有4KB的大小,可以說是非常輕量級的哦。配置也比較方便,用戶可以自定義間距、列數,還有個特色就是可以定義不同屏幕分辨率,不同列數,這個應用在響應式網頁設計是非常方便的。
項目名稱:Macy.js
項目地址:http://macyjs.com/
插件特色
- 輕量級,只有4KB的大小,min版僅2KB!
- 布局列數可自定義配置;
- 純JS,不需要依賴 jQuery 庫.
使用教程
Step 1: 在頁尾引入JS文件,(不能放在Header里哦)
<script src="macy.js"></script>
Step 2: HTML結構
<div id="macy-container"> <div class="demo" > <img src="aa.jpg" /> </div> </div>
Step 3: 配置JS
<script> var masonry = new Macy({ container: '#macy-container', // 圖像列表容器id trueOrder: false, waitForImages: false, useOwnImageLoader: false, debug: true, //設計間距 margin: { x: 10, y: 10 }, //設置列數 columns: 6, //定義不同分辨率(1200,940,520,400這些是分辨率) breakAt: { 1200: { columns: 5, margin: { x: 23, y: 4 } }, 940: { margin: { y: 23 } }, 520: { columns: 3, margin: 3, }, 400: { columns: 2 } } }); </script>贊助商鏈接
喜歡這篇文章嗎?歡迎分享到你的微博、QQ群,并關注我們的微博,謝謝支持。
版權:除非注明,本站文章均為原創文章,轉載請聯系我們授權,否則禁止轉載。
版權:除非注明,本站文章均為原創文章,轉載請聯系我們授權,否則禁止轉載。