iT邦幫忙

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

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

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

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

尚未有邦友留言

立即登入留言