MUURI – 響應式、可排序、可拖拽的布局插件
流布局是目前覺的用于圖像類布局的展示方式之一,最覺就是花瓣、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>贊助商鏈接
喜歡這篇文章嗎?歡迎分享到你的微博、QQ群,并關注我們的微博,謝謝支持。
版權:除非注明,本站文章均為原創文章,轉載請聯系我們授權,否則禁止轉載。
版權:除非注明,本站文章均為原創文章,轉載請聯系我們授權,否則禁止轉載。