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

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

發(fā)表于: HTML & CSS. 評論
Sponsor

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

下面來(lái)看看介紹:

插件名稱(chēng):MUURI
網(wǎng)站地址:https://haltu.github.io/muuri/

拖拽式排序

通過(guò)鼠標隨意拖拽

多種對齊方式

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

篩選

根據標題內容進(jìn)行篩選,篩選時(shí)切的的動(dòng)畫(huà)非常流暢。

使用方法

STEP 1: 將 Muuri 的 js 嵌入到頁(yè)面中,其中「velocity.js」是動(dòng)畫(huà),「Hammer.js」則是實(shí)現拖拽,如果不需要,可以不嵌入。

<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 個(gè)設計網(wǎng)站 → http://hao.shejidaren.com
交流:為設計新人提供的設計交流群,請加入UI設計交流群,分享經(jīng)驗、接單、求職、聊設計。
贊助商鏈接
贊助商鏈接
設計達人微信交流社區:shejidaren888
喜歡這篇文章嗎?歡迎分享到你的微博、QQ群,并關(guān)注我們的微博,謝謝支持。
版權:除非注明,本站文章均為原創(chuàng )文章,轉載請聯(lián)系我們授權,否則禁止轉載。

{ 發(fā)表評論 }