最近在做無代碼平臺的模版列表的時(shí)候, 需要使用瀑布流布局, 類似下面這種:

圖片

為了研究市面上比較成熟的瀑布流方案, 我在github上找呀找, 突然, 發(fā)現(xiàn)了一款設(shè)計(jì)非常巧妙的方案——Masonry.

圖片

Masonry 在 github 上非?；? 目前已有 16.3k star, 有很多網(wǎng)站都采用它的方案實(shí)現(xiàn)瀑布流布局. 在文末我會附上這個(gè)開源項(xiàng)目的地址, 方便大家學(xué)習(xí)參考。

接下來我就帶大家研究一下這個(gè)庫, 并快速應(yīng)用到自己的項(xiàng)目中。

什么是 Maronry

圖片

Masonry 是一個(gè) JavaScript 網(wǎng)格布局庫。它的工作原理是根據(jù)可用的垂直空間將元素放置在最佳位置，有點(diǎn)像泥瓦匠在墻上安裝石頭。我們在互聯(lián)網(wǎng)上也許看到過很多瀑布流的案例。

接下來給大家演示一個(gè)使用案例：

圖片

另一個(gè)比較有意思的案例：

圖片

當(dāng)我們動(dòng)態(tài)添加元素的時(shí)候, 它可以智能的安排好元素的位置。

再聯(lián)想一下, 我們玩的消消樂小游戲和拼圖類小游戲, 是不是也能用它一鍵實(shí)現(xiàn)呢?

圖片

如何使用 Maronry

Maronry 支持 CDN 導(dǎo)入和 npm 安裝使用, 這里我介紹一下 npm 的安裝和使用方式。

npm install masonry-layout

我們安裝好之后可以先編寫一下 html 結(jié)構(gòu)：

<div class="grid">
  <div class="grid-item">FlowMix</div>
  <div class="grid-item grid-item--width2">H5</div>
  <div class="grid-item">Dooring</div>
</div>

接下來我們就可以直接使用這個(gè)庫來初始化瀑布流布局了：

var elem = document.querySelector('.grid');
var msnry = new Masonry( elem, {
  // options
  itemSelector: '.grid-item',
  columnWidth: 200
});

// 元素參數(shù)是一個(gè)選擇器字符串
var msnry = new Masonry( '.grid', {
  // options
});

使用起來就是這么簡單, 當(dāng)然文檔上還有很多高級用法, 我們也可以學(xué)習(xí)參考一下:https://masonry.desandro.com/

分享幾個(gè)更高級的案例

1. 瀑布流布局動(dòng)畫

圖片

2. 瀑布流3D動(dòng)畫

圖片