前端必備插件之純?cè)鶭S的瀑布流插件Macy.js
這是一款非常輕量級(jí)的純?cè)鶭S的瀑布流插件——Macy.js,如今圖片和視頻網(wǎng)站非常多,非常適應(yīng)瀑布流這樣的布局方式來(lái)呈現(xiàn)給用戶。
這款流布局JS插件僅有4KB的大小,可以說(shuō)是非常輕量級(jí)的哦。配置也比較方便,用戶可以自定義間距、列數(shù),還有個(gè)特色就是可以定義不同屏幕分辨率,不同列數(shù),這個(gè)應(yīng)用在響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)是非常方便的。
所以,選擇一款簡(jiǎn)單易用的瀑布流js插件,可以讓前端工程師快速開(kāi)發(fā)出漂亮的瀑布流Pc網(wǎng)站和react 后臺(tái)項(xiàng)目。
瀑布流布局代表網(wǎng)站就是 花瓣網(wǎng),設(shè)計(jì)師一定不會(huì)陌生的設(shè)計(jì)網(wǎng)站。
插件特色
- 輕量級(jí),只有4KB的大小,min版僅2KB!
- 布局列數(shù)可自定義配置;
- 純JS,不需要依賴 jQuery 庫(kù).
先看看Macy.js的項(xiàng)目案例截圖吧:
官網(wǎng)地址: http://macyjs.com/
下面就是具體的使用說(shuō)明:
Step 1: 在頁(yè)尾引入JS文件,(不能放在Header里哦)
<script src="macy.js"></script>
Step 2: HTML結(jié)構(gòu)
<div id="macy-container"> <div > <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, //設(shè)計(jì)間距 margin: { x: 10, y: 10 }, //設(shè)置列數(shù) 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>
如果你使用了vue和react,可以采用npm安裝macy.JS
npm install macy
github倉(cāng)庫(kù)地址:https://github.com/bigbitecreative/macy.js
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
使用javascript創(chuàng)建快捷方式的簡(jiǎn)單實(shí)例
這篇文章介紹了使用javascript創(chuàng)建快捷方式的簡(jiǎn)單實(shí)例,有需要的朋友可以參考一下2013-08-08js中獲取jsp表單中radio類型的值簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇js中獲取jsp表單中radio類型的值簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08利用JS實(shí)現(xiàn)簡(jiǎn)單的日期選擇插件
這篇文章主要介紹了利用JS實(shí)現(xiàn)簡(jiǎn)單的日期選擇插件,文中實(shí)現(xiàn)兩種效果的日期選擇,一種是默認(rèn)參數(shù),點(diǎn)擊日期后直接選擇該日期,另一種是顯示按鈕來(lái)設(shè)置時(shí)間,有需要的朋友可以參考借鑒,下面來(lái)一起看看吧。2017-01-01原生js實(shí)現(xiàn)可兼容PC和移動(dòng)端的拖動(dòng)滑塊功能詳解【測(cè)試可用】
這篇文章主要介紹了原生js實(shí)現(xiàn)可兼容PC和移動(dòng)端的拖動(dòng)滑塊功能,結(jié)合實(shí)例形式詳細(xì)分析了javascript事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作實(shí)現(xiàn)滑塊拖動(dòng)功能的相關(guān)操作技巧,需要的朋友可以參考下2019-08-08JavaScript中reduce方法的用法及使用場(chǎng)景
reduce()方法對(duì)數(shù)組中的每個(gè)元素按序執(zhí)行一個(gè)提供的reducer函數(shù),每一次運(yùn)行 reducer會(huì)將先前元素的計(jì)算結(jié)果作為參數(shù)傳入,最后將其結(jié)果匯總為單個(gè)返回值,今天我們就介紹一下reduce的幾種簡(jiǎn)單使用場(chǎng)景,需要的朋友可以參考下2023-08-08使用phantomjs進(jìn)行網(wǎng)頁(yè)抓取的實(shí)現(xiàn)代碼
這篇文章主要介紹了使用phantomjs進(jìn)行網(wǎng)頁(yè)抓取的實(shí)現(xiàn)代碼,需要的朋友可以參考下2014-09-09