溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

前端必備插件之純?cè)鶭S的瀑布流插件Macy.js

發(fā)布時(shí)間：2020-09-29 04:29:11 來源：腳本之家 閱讀：510 作者：admin 欄目：web開發(fā)

這是一款非常輕量級(jí)的純?cè)鶭S的瀑布流插件——Macy.js，如今圖片和視頻網(wǎng)站非常多，非常適應(yīng)瀑布流這樣的布局方式來呈現(xiàn)給用戶。

這款流布局JS插件僅有4KB的大小，可以說是非常輕量級(jí)的哦。配置也比較方便，用戶可以自定義間距、列數(shù)，還有個(gè)特色就是可以定義不同屏幕分辨率，不同列數(shù)，這個(gè)應(yīng)用在響應(yīng)式網(wǎng)頁設(shè)計(jì)是非常方便的。

所以，選擇一款簡(jiǎn)單易用的瀑布流js插件，可以讓前端工程師快速開發(fā)出漂亮的瀑布流Pc網(wǎng)站和react 后臺(tái)項(xiàng)目。

瀑布流布局代表網(wǎng)站就是 花瓣網(wǎng)，設(shè)計(jì)師一定不會(huì)陌生的設(shè)計(jì)網(wǎng)站。

插件特色

  1. 輕量級(jí)，只有4KB的大小，min版僅2KB！
  2. 布局列數(shù)可自定義配置;
  3. 純JS，不需要依賴 jQuery 庫.

先看看Macy.js的項(xiàng)目案例截圖吧：

前端必備插件之純?cè)鶭S的瀑布流插件Macy.js

官網(wǎng)地址： http://macyjs.com/

下面就是具體的使用說明：

Step 1: 在頁尾引入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倉庫地址：https://github.com/bigbitecreative/macy.js

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手