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

圖片

為了研究市面上比較成熟的瀑布流方案, 我在github上找呀找, 突然, 發現了一款設計非常巧妙的方案——Masonry.

圖片

Masonry 在 github 上非常火, 目前已有 16.3k star, 有很多網站都采用它的方案實現瀑布流布局. 在文末我會附上這個開源項目的地址, 方便大家學習參考。

接下來我就帶大家研究一下這個庫, 并快速應用到自己的項目中。

什么是 Maronry

圖片

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

接下來給大家演示一個使用案例：

圖片

另一個比較有意思的案例：

圖片

當我們動態添加元素的時候, 它可以智能的安排好元素的位置。

再聯想一下, 我們玩的消消樂小游戲和拼圖類小游戲, 是不是也能用它一鍵實現呢?

圖片

如何使用 Maronry

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

npm install masonry-layout

我們安裝好之后可以先編寫一下 html 結構：

<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>

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

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

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

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

分享幾個更高級的案例

1. 瀑布流布局動畫

圖片

2. 瀑布流3D動畫

圖片