iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 28
0
Modern Web

30天學習30套前端技術(2018年)系列 第 28

[十分鐘學習] Muuri - 網站Layout大躍進

  • 分享至 

  • xImage
  •  

example1

Muuri是一套JavaScript Layout引擎,讓你可以建構多樣化的Layout,並具有響應式、可排序、可濾性、拖曳移動或動畫效果。

GitHub Star: 6,000
Javascripting Overall: -
瀏覽器: ChromeFirefoxIE9+
RWD: 支援
License: MIT


《安裝》

  • CDN

      <!-- web-animations v2.3.1 -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.3.1/web-animations.min.js"></script>
      <!-- hammer.js v2.0.8 -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
      <!-- Muuri v0.5.3 -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/muuri/0.5.3/muuri.min.js"></script>
    
  • npm

      $ npm install muuri
    
  • Bower

      $ bower install muuri
    

《範例》

  • 可拖曳的自動排版

      <div class="grid">
      	<div class="item">
      		<div class="item-content"><!-- 內容 --></div>
      	</div> 
      	...
      </div>
      <style>
      	.grid {
      		position: relative;
      	}
      	.item { 
      		/* 外層 */
      		position: absolute;
      		z-index: 1;
      		width: 200px;
      		height: 200px;
      		line-height: 200px;
      		border: 1px #000 solid;
      	}
      	.item-content { /* 內容 */
      		font-size: 30px;
      		text-align: center;
      		background: white;
      	}
      	.item.muuri-item-dragging .item-content { /* 拖曳中內容 */
      		background: blue;
      	}
      	.item.muuri-item-releasing .item-content { /* 拖曳完成內容 */
      		background: red; 
      	}
      	.item.muuri-item-hidden {
      		z-index: 0;
      	}
      	.item.muuri-item-dragging { /* 拖曳中 */
      		z-index: 3;
      	}
      	.item.muuri-item-releasing { /* 拖曳完成 */
      		z-index: 2;
      	}
      </style>
      <script type="text/javascript">
      	var grid = new Muuri( ".grid", { 
      		// 參數設定[註1]
      		dragEnabled: true 
      	});
      	[].slice.call( document.querySelectorAll( ".item"  ) )
      	.forEach(function (elem) {
      		elem.addEventListener( "click", function (e) {
      			e.preventDefault();
      		});
      	});
      </script>
    

    [註1]

    參數 描述 選項

    items|指定網格|[選擇器]、*(預設)
    showDuration|網格顯示時,過場動畫的時間(單位: 毫秒)|[數字]、300(預設)
    showEasing|網格顯示時,過場動畫速度曲線|linearease(預設)、ease-inease-outease-in-out
    hideDuration|網格隱藏時,過場動畫速度曲線(單位: 毫秒)|[數字]、300(預設)
    hideEasing|網格隱藏時,過場動畫速度曲線|linearease(預設)、ease-inease-outease-in-out
    visibleStyles.opacity|網格顯示時,透明度|[0.1到1]、1(預設)
    visibleStyles.transform|網格顯示時,內容的變形程度|scale(1)(預設)、[變形函式]
    hiddenStyles.opacity|網格隱藏時,透明度|[0.1到1]、0(預設)
    hiddenStyles.transform|網格隱藏時,內容的變形程度|scale(0.5)(預設)、[變形函式]
    layout.horizontal|網格水平排序|truefalse(預設)
    layout.alignRight|版面置右|truefalse(預設)
    layout.alignBottom|版面置下|truefalse(預設)
    layout.rounding|網格大小依版面做運算|true(預設)、false
    layoutOnResize|視窗大小改變時,延遲多少時間後再做重新排序(單位: 毫秒)|[數字]、300(預設)
    layoutOnInit|當進入頁面時,則自動觸發網格新排序|true(預設)、false
    layoutDuration|視窗大小異動時,網格重新排列的時間(單位:毫秒)|[數字]、300(預設)
    layoutEasing|視窗大小異動時,網格重新排列的速度曲線|linearease(預設)、ease-inease-outease-in-out
    sortData|透過函式,返回值可以做網格排序|null(預設)、[函式]
    dragEnabled|網格可以拖曳|truefalse(預設)
    dragStartPredicate.distance|拖曳多少像素後,才開始執行拖曳|[數字]、0(預設)
    dragStartPredicate.delay|拖曳多少時間後,才開始執行拖曳(單位:毫秒)|[數字]、0(預設)
    dragAxis|限制拖曳方向|null(預設)、xy
    dragSort|拖曳完畢後,自動或透過函式方式來做排序|true(預設)、[函式]
    dragSortPredicate.action|拖曳過去的網格,網格異動的模式|move(預設)、swap
    dragReleaseDuration|拖曳網格完成,過場動畫的時間|[數字]、300(預設)
    dragReleaseEasing|拖曳網格完成,過場動畫的速度| linearease(預設)、ease-inease-outease-in-out
    containerClass|版面類別名稱|[字串]、muuri(預設)
    itemClass|網格類別名稱|[字串]、muuri-item(預設)
    itemVisibleClass|網格顯示時類別名稱|[字串]、muuri-item-shown(預設)
    itemHiddenClass|網格隱藏時類別名稱|[字串]、muuri-item-hidden(預設)
    itemPositioningClass|網格做排序動作的類別名稱|[字串]、muuri-item-positioning(預設)
    itemDraggingClass|網格拖曳中類別名稱|[字串]、muuri-item-dragging(預設)
    itemReleasingClass|網格拖曳完成後類別名稱|[字串]、muuri-item-releasing(預設)


《延伸》

  1. Muuri - Responsive, sortable, filterable and draggable grid layouts
  2. haltu/muuri: Responsive, sortable, filterable and draggable grid layouts

上一篇
[十分鐘學習] Timeline.js - 時間軸
下一篇
[十分鐘學習] Algolia Places - 強化地址輸入欄位
系列文
30天學習30套前端技術(2018年)61
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言