fly63前端网

www.fly63.com

首页文章资源工具教程 栏目
  • 关于我们
  • 网站投稿
  • 赞助一下
搜索

在线工具_工作生活好帮手

打造各种简单、易用、便捷的在线工具,网友无需注册和下载安装即可使用

点击查看

关闭

提交网站

Muuri
分享
复制链接
新浪微博
QQ 好友

扫一扫分享

网站地址:http://haltu.github.io/muuri/
GitHub:https://github.com/haltu/muuri
网站描述:响应式,可排序,可过滤和可拖动的网格布局

Muuri 是一个响应式,可排序,可过滤和可拖动的网格布局。 Muuri 的布局系统允许以几乎任何可想象的方式将网格项目定位在容器内。你也可以提供自己的布局算法,以任何方式定位项目。相比之下,Muuri 是一个组合的包装:Packery , Masonry, Isotope 和 jquery UI 排序。  


用法

引入文件

Muuri依赖于以下库:

  • Velocity (1.2.x)
  • Hammer.js (2.0.x) 可选,仅当你使用拖动功能时才需要

引入文件:

<script src="velocity.js"></script>
<script src="hammer.js"></script>
<!-- 需要在body元素内,或者访问body元素 -->
<script src="muuri.js"></script>

将 Muuri 包含在网站中的一个重要注意事项是,它需要在载入时访问 body 元素。 Muuri 在初始化上做一些功能检查,如果它不能访问 body 元素,可能无法正常工作。


html

每个网格必须在容器元素内具有容器元素和项目元素。
网格项必须始终由至少两个元素组成。外部元素用于定位项目,内部元素(第一个直接子项)用于动画项目的可见性(显示/隐藏方法)。你可以在内部项目元素中插入任何所需的标记。

<div class="grid">

  <div class="item">
    <div class="item-content">
      This can be anything.
    </div>
  </div>

  <div class="item">
    <div class="item-content">
      <div class="my-custom-content">
        Yippee!
      </div>
    </div>
  </div>

</div>

css

网格元素必须“定位”,这意味着它的 CSS 位置属性必须设置为 relative , absolute 或 fixed 。还要注意, Muuri 根据项目覆盖的区域自动调整容器元素的大小。
项目元素必须将其 CSS 位置设置为绝对,并将其显示属性设置为块,除非元素的显示设置为固有的块。
item 元素不能有任何 CSS 过渡或动画应用于它们,因为它可能与 Velocity 的动画冲突。
你可以通过给项目元素留一些边距来控制图块之间的间隙。

.grid {
  position: relative;
}
.item {
  display: block;
  position: absolute;
  width: 100px;
  height: 100px;
  margin: 5px;
  z-index: 1;
}
.item.muuri-dragging,
.item.muuri-releasing {
  z-index: 2;
}
.item.muuri-hidden {
  z-index: 0;
}
.item-content {
  position: relative;
  width: 100%;
  height: 100%;
}

JS

最后,启动Muuri实例。
最低配置如下所示。你必须始终向容器元素和初始项目元素提供 Muuri 。
请务必查看所有可用的选项,方法和事件。

var grid = new Muuri({
  container: document.getElementsByClassName('grid')[0],
  // Muuri does not convert a node list to array automatically
  // so we have to do it manually.
  items: [].slice.call(document.getElementsByClassName('item'))
});

链接: https://fly63.com/nav/1079

more>>
相关栏目
Materialize
基于Material Design的现代响应式前端框架
官网GitHub
Element UI
一套基于 Vue 2.0 的桌面端组件库
官网GitHub
Material Design(MDB)
领先的Bootstrap UI套件之一
点击进入
Muse-UI
基于 Vue2.0 的 Material Design UI 库
官网GitHub
sb-admin
基于Bootstrap简约美观的后台管理模板
官网GitHub
Vue-Access-Control
Vue权限管理解决方案
官网GitHub
RmlUI
桌面端GUI开发框架
官网GitHub
kitty-ui
基于 Vue + Element 实现的权限管理系统
点击进入GitHub
vue-multiselect
Vue.js 打造的下拉组件
官网GitHub
Structor
先进的React GUI编辑器
点击进入GitHub
lulu ui
基于jQuery,针对PC网站,兼容IE7+的前端UI框架
官网GitHub
Ant Design
是一个致力于提升『用户』和『设计者』使用体验的中台设计语言
官网GitHub
vue-design-system
一个用于基于 Vue.js 构建 UI 设计系统的开源工具
官网GitHub
Tauri
使用Web前端构建更小,更快,更安全的桌面应用
官网GitHub
Element Plus
基于 Vue 3,面向设计师和开发者的组件库
官网GitHub
vue-blu
基于Vuejs和Bulma开发的开源UI组件库
官网GitHub

手机预览