安装
npm install murri —save
 
如果需要drag，需要依赖hammer.js，可以通过js script引入：
 
 
使用
HTML
最少需要class为grid、item、item-content的div，其中grid的作用是自适应布局，item是区分每个元素，item-content用于动画设置；
<div class="grid">
    <div class="item">
        <div class="item-content">
            <!-- Safe zone, enter your custom markup -->
            This can be anything.
            <!-- Safe zone ends -->
        </div>
    </div>
 
    <div class="item">
        <div class="item-content">
        <!-- Safe zone, enter your custom markup -->
            <div class="my-custom-content">
            Yippee!
            </div>
        <!-- Safe zone ends -->
        </div>
    </div>
<div>
 
CSS
grid必须为relative，item必须为block以及absolute；另外item之间可以设置gap
.grid {
    position: relative;
}
.item {
    display: block;
    position: absolute;
    width: 48%;
    height: 200px;
    padding: 5px;
    margin: 10px;
    z-index: 1;
    background: #ccc;
    color: #fff;
}
.item.muuri-item-dragging {
    z-index: 3;
}
.item.muuri-item-releasing {
    z-index: 2;
}
.item.muuri-item-hidden {
    z-index: 0;
}
.item-content {
    position: relative;
    width: 100%;
    height: 100%;
}
 
Javascript
Muuri是一个构造函数，第一个参数接受一个元素或者字符串(内置了querySelector):
var grid = new Muuri('.grid');
如上是最简单的方式，这样就可以看到效果了，如果希望拖拽，可以做如下配置：
var grid = new Muuri('.grid’, {
    dragEnabled: true
});
即Muuri的第二个参数是一个object，默认的dragEnabled为false，所以如果希望拖动，需要设置为true。
 
 
配置
如果不做任何配置，则默认配置为：
{
  // Item elements
  items: '*',
 
  // Default show animation
  showDuration: 300,
  showEasing: 'ease',
 
  // Default hide animation
  hideDuration: 300,
  hideEasing: 'ease',
 
  // Item's visible/hidden state styles
  visibleStyles: {
    opacity: '1',
    transform: 'scale(1)'
  },
  hiddenStyles: {
    opacity: '0',
    transform: 'scale(0.5)'
  },
 
  // Layout
  layout: {
    fillGaps: false,
    horizontal: false,
    alignRight: false,
    alignBottom: false,
    rounding: true
  },
  layoutOnResize: 100,
  layoutOnInit: true,
  layoutDuration: 300,
  layoutEasing: 'ease',
 
  // Sorting
  sortData: null,
 
  // Drag & Drop
  dragEnabled: false,
  dragContainer: null,
  dragStartPredicate: {
    distance: 0,
    delay: 0,
    handle: false
  },
  dragAxis: null,
  dragSort: true,
  dragSortInterval: 100,
  dragSortPredicate: {
    threshold: 50,
    action: 'move'
  },
  dragReleaseDuration: 300,
  dragReleaseEasing: 'ease',
  dragHammerSettings: {
    touchAction: 'none'
  },
 
  // Classnames
  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'
}
 
布局：
layout: {
    fillGaps: false,
    horizontal: false,
    alignRight: false,
    alignBottom: false,
    rounding: true
},
如上配置指定的布局的默认排列方式 - 从左上方开始排还是从右上方开始排、从上往下排还是从左往右排，在这里都是可以指定的；
 
排序：
HTML
    <div class="grid">
        <div class="item" data-sort="4">
            <div class="item-content">
            one
            </div>
        </div>
        <div class="item" data-sort=“3">
            <div class="item-content">
            two
            </div>
        </div>
        <div class="item" data-sort=“2">
            <div class="item-content">
            three
            </div>
        </div>
        <div class="item" data-sort=“1">
            <div class="item-content">
            four
            </div>
        </div>
    </div>
 
Javascript
sortData: {
    foo: function (item, element) {
        let sortId = element.getAttribute('data-sort');
        return Number(sortId);
    }
},
 
grid.sort('foo');
 
如上所示我们可以在item上设置自定义属性data-sort，然后依次作为排序的依据；
 
拖动：
dragStartPredicate: {
    distance: 0,
    delay: 0,
    handle: '.drag-btn'
},
distance表示开始拖动前移动的距离，默认为0；delay表示拖动的延时；handle默认为false，认为整个item都是可以拖动的，但也可以接受一个字符串，使用querySelecor查询，这样我们就可以在每个item右上角设置一个按钮，只有点击这个按钮才能拖动；
 
拖动方向：
dragAxis: ‘x'
表示只能在x方向拖动，也可以设置为’y’，默认为null，表示x和y方向都可以拖动；
 
拖动排序:
dragSort: true,
表示是否允许拖动之后重新排序，默认是true，如果设置为false，那么就只能排序而不能更改位置；
 
拖动排序间隔：
dragSortInterval: 200
默认是200ms，这个值表示拖动之后每隔多少时间进行判断是否能够排序，显然这个时间越长，则排序进行的越缓慢，所以可以设置为0；
 
拖动排序断定：
dragSortPredicate: {
    threshold: 50,
    action: 'swap'
},
默认的action是move，但是对于拖动排序来说这种效果并不好，而swap的效果往往会更好一些 - 比如看板有两列，某列的上下两个元素之间可以直接拖动替换位置，即为swap；而threshold表示交换阈值，取值在0 - 100，这里的50表示当两个item之间交叉的部分超过50%时，就触发swap；
 
拖动释放动画时间：
dragReleaseDuration: 0,
这里的默认值是300，即在拖动释放之后从释放位置到正确位置移动的时间，如果设置为0表示释放之后会立即回到原位，这种效果在交互上也是非常不错的；
 
拖动释放动画:
dragReleaseEasing: 'ease',
就释放拖动之后回到原位的动画效果，默认为’ease’，也可设置为 ‘ease-out’ 等；
 
一些默认的class名称：
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'
这些名称都是可以根据自己的需要进行修改的；
 
我所需要的最终的配置为：
var grid = new Muuri('.grid', {
    layoutDuration: 600,
    sortData: {
        foo: function (item, element) {
            let sortId = element.getAttribute('data-sort');
            return Number(sortId);
        }
    },
    dragEnabled: true,
    dragStartPredicate: {
        distance: 0,
        delay: 0,
        handle: '.drag-btn'
    },
    dragAxis: null,
    dragSort: true,
    dragSortInterval: 0,
    dragSortPredicate: {
        threshold: 50,
        action: 'swap'
    },
    dragReleaseDuration: 200,
    dragReleaseEasing: 'ease',
});
 
grid.sort('foo');
 
 
Grid方法
Grid即通过 new Muuri() 或得到的实例，该实例默认有一些方法可以调用，下面一一介绍：
 
获取grid
var elem = grid.getElement()
获取grid这个element
 
获取item
var allItems = grid.getItems() // 获取到所有的item
 
var activeItems = grid.getItems().filter(function (item) {
  return item.isActive();
}); // 获取到active的item，即显示出来的item，这个active是在配置项中 items 中指定的，默认是 ‘*’
 
var firstItem = grid.getItems()[0]; // 获取到第一个item
 
更新item
grid.refreshItems(); // 更新所有的Item，主要是缓存的维度
grid.refreshItems([0, someElem, someItem]) // 更新特定的Item
 
同步DOM
grid.synchronize()
同步DOM元素，保证DOM的顺序结构和页面显示的顺序结构一致。如果我们使用了排序函数使得item顺序变化，但这时看DOM实际上是没有变的，所以如果希望保持一致就可以使用grid.synchronize()函数；
 
布局
grid.layout() // 根据配置项布局
grid.layout(true) // 根据配置项无动画的直接布局
grid.layout(function (items) {
    console.log(‘layout done');
}); // 布局，并定义回调函数，如果所有item布局结束即调用该回调函数
 
添加Item
Item可以通过grid.add(elements, [options])的方式添加到grid中，添加的过程中默认是添加到最后，添加之后会自动触发grid.layout()，另外如果你希望同步DOM可以使用grid.synchronize()来同步：
grid.add([elemA, elemB]) // 添加两个新的items到grid末尾
grid.add([elemA, elemB], { index: 0 }) // 添加两个新的items到grid开头
grid.add([elemA, elemB], { layout: false }) // 跳过自动layout
 
移除Item
grid.remove(0); // 移除第一个Item，但是该元素保持在DOM中
grid.remove([elemA, elemB], { removeElements: true }); // 移除Items以及相关的元素
grid.remove([elemA, elemB], { layout: false }); // 移除Items，并禁止layout
 
显示和隐藏
grid.show();
grid.hide();
 
过滤Item
grid.filter(function (item) {
    return item.getElement().hasAttribute(‘data-foo');
}); // 展示所有拥有data-foo属性的item
grid.filter(‘[data-foo]’); // 上述简写
grid.filter(‘.good’); // 展示有class为good的Items
 
Items排序
对Items排序， 有三种方式可以对Items进行排序；
//第一种排序方式： Sort items by data-id attribute value (ascending).
grid.sort(function (itemA, itemB) {
  var aId = parseInt(itemA.getElement().getAttribute('data-id'));
  var bId = parseInt(itemB.getElement().getAttribute('data-id'));
  return aId - bId;
});
 
//第二种排序方式  Sort items using the sort data keys (ascending).
grid.sort('foo bar’, {descending: true});
 
//第三种排序方式 Sort items with a presorted array of items.
grid.sort(presortedItems);
 
 
 
移动Items
grid.move(elemA, elemB, {action: ’swap'}); // 将elemA移动到elemB的位置，使用交换的方式
grid.move(0, -1); 将第一个Item移动到最后一个位置
 
移动Items到另外一个grid
gridA.send(0, gridB, -1); // 将gridA中的第一个Item移动到gridB中的最后位置，移动之后将会append到document.body后
 
销毁grid
grid.destroy(); // 销毁grid
grid.destroy(true); // 销毁grid并移除Item元素
 
 
 
Grid事件
在操作grid时会触发各种各样的事件，这里我们需要一一介绍：
 
同步：
在grid.synchronize();调用之后会触发下面的回调函数:
grid.on('synchronize', function () {
    console.log('Synced')
})
 
 
布局开始/结束：
在grid.layout()调用开始和之后触发下面的回调函数：
grid.on('layoutStart', function () {
    console.log('start')
})
grid.on('layoutEnd', function () {
    console.log('end');
});
 
添加Items触发下面的回调函数：
grid.on('add', function (items) {
  console.log(items);
});
 
移除Items触发下面的回调函数：
grid.on('remove', function (items, indices) {
  console.log(items, indices);
});
 
在grid开始show和结束show之后触发回调函数：
grid.on('showStart', function (items) {
  console.log(items);
});
 
grid.on('showEnd', function (items) {
  console.log(items);
});
 
在grid开始hide和结束hide之后触发回调函数：
grid.on('hideStart', function (items) {
  console.log(items);
});
 
grid.on('hideEnd', function (items) {
  console.log(items);
});
 
在grid.filter()函数调用之后触发：
grid.on('filter', function(shownItems, hiddenItems) {
    console.log('shown', shownItems)
    console.log('hidden', hiddenItems)
});
grid.filter('.table');
 
在grid.sort()函数调用之后触发：
grid.on('sort', function (currentOrder, previousOrder) {
    console.log('目前的顺序', currentOrder);
    console.log('之前的顺序', previousOrder);
});
grid.sort('foo');
 
在grid.move()函数调用之后触发：
grid.on('move', function (data) {
  console.log(data);
});
 
与grid.send()函数调用触发的相关事件：
grid.on('send', function (data) {
  console.log(data);
});
grid.on('beforeSend', function (data) {
  console.log(data);
});
grid.on('receive', function (data) {
  console.log(data);
});
grid.on('beforeReceive', function (data) {
  console.log(data);
});
 
 
drag相关事件
 
grid.on('dragInit', function (item, event) {
    console.log('拖拽初始化', event, item);
});
grid.on('dragStart', function (item, event) {
    console.log('拖拽开始', event, item);
});
grid.on('dragMove', function (item, event) {
    console.log('拖拽移动', event, item);
});
grid.on('dragScroll', function (item, event) {
    console.log('拖拽Scroll', event, item);
});
grid.on('dragInit', function (item, event) {
    console.log('拖拽初始化', event, item);
});
grid.on('dragEnd', function (item, event) {
    console.log('拖拽结束', event, item);
});
 
如果要记录拖拽的顺序，下面的事件尤为重要：
 
grid.on('dragStart', function (item, event) {
    console.log('拖拽开始 grid items', grid.getItems());
});
grid.on('dragEnd', function (item, event) {
    console.log('拖拽结束 grid items', grid.getItems());
});
 
drag释放
grid.on('dragReleaseStart', function (item) {
  console.log(item);
});
grid.on('dragReleaseEnd', function (item) {
  console.log(item);
});
 
drag销毁
grid.on('destroy', function () {
  console.log('Muuri is no more...');
});
 
 
Item 方法
每个Item都有相关的方法可以调用，下面一一介绍：
 
获取grid
var grid = item.getGrid();
 
获取Item对应的Element
var elem = item.getElement();
 
获取Item的宽度
var width = item.getWidth();
 
获取Item的高度
var height = item.getHeight();
 
获取Item的margin
var margin = item.getMargin();
 
获取Item相对于container元素的left和top值
var position = item.getPosition();
其中position是一个对象，有left和top属性，都是number类型的数字；
 
判断某个Item是否active
var isActive = item.isActive();
 
判断某个Item是否可见：
var isVisible = item.isVisible();
 
判断某个Item是否正在被拖拽：
var isDragging = item.isDragging();
 
判断某个Item是否已经被释放：
var isReleasing = item.isReleasing();
 
判断某个Item是否被销毁：
var isDestroyed = item.isDestroyed();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

murri的更多相关文章

  1. Linux环境安装PostgreSQL-10.1[转]

    环境及资源 Linux版本:CentOS release 6.5 PostgresSQL版本:postgresql-10.1 PostgreSQL官网下载地址:https://www.postgres ...

随机推荐

  1. oo第八次作业

    oo第八次作业 第五次作业分析: 1.度量图: 2.类图: 第五次作业由于是第一次接触多线程,所以导致自己的经验不足,因此最终也没有完成作业,到最后任然不能实现三部电梯的有效调度,所以导致了这次作业的 ...

  2. 常见的hbase jar

  3. SCUCTF2018web部分wp

    [签到] Web部分的签到题,打开连接后F12审查元素 可以看到有被隐藏起来的JSFuck密码,解码运行后可得flag [计算器] 打开后界面如上图,要求简单来说就是回答20道数学题目,每道题最多3s ...

  4. 前端页面播放 rtmp 流与 flv 格式视频文件

    技术 :angular/cli , html5 , typescript , scss ,es 6 ... 项目类型:直播视频与视频回放 使用到 插件 : videojs + ckplayer 遇到的 ...

  5. ubuntu 安装vue+element

    1.安装npm sudo apt install npm 检测安装npm -v 因为npm安装软件慢,可设置淘宝镜像 npm config set registry https://registry. ...

  6. AlphaGo原理浅析

    一.PolicyNetwork(走棋网络) 首先来讲一下走棋网络.我们都知道,围棋的棋盘上有19条纵横交错的线总共构成361个交叉点,状态空间非常大,是不可能用暴力穷举的方式来模拟下棋的.但是我们可以 ...

  7. oracle创建与mysql的dblink

    1.先简单介绍下环境   操作系统:windows 2008 R2 (64bits) oracle数据库:10gr2 10.2.0.3.0(32bits) mysql数据库:5.1 (32bits) ...

  8. HDU 4609 3-idiots (组合数学 + FFT)

    题意:给定 n 条边,问随机选出 3 条边,能组成三角形的概率是多少. 析:答案很明显就是  能组成三角形的种数 / (C(n, 3)).现在的问题是怎么求能组成三角形的种数. 这个博客说的非常清楚了 ...

  9. GXB动态重配置

    可选择重配置逻辑(Optional Reconfiguration Logic) 使能选项: • Capability registers • Control and status registers ...

  10. org.apache.maven.archiver.mavenarchiver.getmanifest怎么解决

    原因就是你的maven的配置文件不是最新的 1.help ->Install New Software -> add ->https://otto.takari.io/content ...