MUURI – 響應式、可排序、可拖拽的布局插件

原文：http://www.shejidaren.com/muuri.html

流布局是目前覺的用於圖像類布局的展示方式之一，最覺就是花瓣、Pinterest，而這類布局也有很多，比如之前介紹的《有用的jQuery布局插件推薦》，今天主要向大家介紹MUURI，它的特色是支持響應式、排序、篩選以及拖拽布局元素。

下面來看看介紹：

插件名稱：MUURI
網站地址：https://haltu.github.io/muuri/

拖拽式排序

通過鼠標隨意拖拽

多種對齊方式

比如左上、右上，左右兩端對齊等。

篩選

根據標題內容進行篩選，篩選時切的的動畫非常流暢。

使用方法

STEP 1: 將 Muuri 的 js 嵌入到頁面中，其中「velocity.js」是動畫，「Hammer.js」則是實現拖拽，如果不需要，可以不嵌入。

<script src="velocity.js"></script>
<script src="hammer.js"></script>
<!-- muuri.js 需要嵌入到 body 內-->
<script src="muuri.js"></script>

STEP 2: html代碼結構

<div class="grid">

  <div class="item">
    <div class="item-content">
      這里是你的內容
    </div>
  </div>

  <div class="item">
    <div class="item-content">
      <div class="my-custom-content">
        Yippee!
      </div>
    </div>
  </div>

</div>

推薦：查看最受歡迎的 301 個設計網站 →  http://hao.shejidaren.com