介紹

Muuri是一個JavaScript佈局引擎，可讓你構建各種佈局並使其具有響應性，可排序，可過濾，可拖動和/或動畫化。Muuri是Packery, Masonry, Isotope 和Sortable的組合。Muuri使用Web_Animations_API製作動畫，並具有處理拖動的內部機制。

Github

https://github.com/haltu/muuri

相關特性

• 可定製的佈局

Muuri的佈局系統允許將網格項目以幾乎任何可以想象的方式放置在容器中。

• 拖放

內置支持拖放網格項目。

• 廣泛且豐富的API

具有足夠方法和事件的擴展API，可以完全控制庫的行為。

• 快速的動畫

快速定位，顯示和隱藏由Web Animations驅動的動畫。

• 良好的瀏覽器支持

在所有現代瀏覽器和IE9 +（需要用於Web動畫的polyfill和請求動畫框架）中均可使用。

• 完全開源

Muuri MIT licensed

效果一覽

快速入門

• 1、使用npm安裝（或者使用打包好的壓縮過的js文件或者使用cdn服務）

npm install muuri

• 2、安裝Web Animations Polyfill（如果需要）

Muuri默認情況下使用Web Animations處理所有動畫。如果需要在不支持Web動畫的瀏覽器上使用Muuri，則需要使用polyfill。

npm install web-animations-js

• 3、添加引用

在您的網站上添加Muuri，並確保在Muuri之前包含Web AnimationsPolyfill（如果需要）

• 4、添加標記

每個網格必須具有一個容器元素。網格項必須始終至少包含兩個元素。外部元素用於放置項目，內部元素（第一個直接子對象）用於設置項目的可見性動畫（顯示/隱藏方法）。可以在內部item元素內插入任何所需的標記。

 

 

 
 這可以是任何東西
  

 

 

 

 

 
 

 Yippee!
 

 
 

 

 

• 5、添加樣式

a、容器元素必須“定位”，這意味著它的CSS位置屬性必須設置為相對，絕對或固定。還要注意，Muuri會根據項目覆蓋的區域和佈局算法配置自動調整容器元素的寬度/高度。

b、item元素的CSS位置必須設置為absolute ，其display屬性必須設置為block。Muuri實際上強制執行display：block;以防萬一，並將其​​作為內聯樣式添加到所有項目元素中。

c、item元素必須沒有應用CSS過渡或動畫，因為它們可能與Muuri的內部動畫引擎衝突。但是，如果您希望在佈局操作後更改其大小時對其進行動畫處理，則可以對容器元素應用過渡。

d、可以通過給item元素留一些邊距來控制item之間的間隙。

e、永遠不設置overflow: auto; 或 overflow: scroll到容器元素。Muuri的計算邏輯不能解決這個問題。

• 6、最簡單的配置

必須始終提供容器元素（或選擇器，以便Muuri可以為您獲取該元素），其他所有內容都是可選的。

var grid = new Muuri('.grid');

更多詳細的配置或者API請參閱Github上提供的非常詳細的相關文檔，這是一個非常值得使用的網格佈局引擎！

總結

Muuri用於創建響應式，可排序，可過濾和可拖動的網格佈局。Muuri有大量的單元測試，它已經準備好了，你可以將它用於任何項目中，完全開源！