HTML & CSS » miniGrid：轻量级流布局JS插件

miniGrid：轻量级流布局JS插件

发表于: HTML & CSS. 评论 (2)
Sponsor

流布局我想不少用户知道，这些布局前端代码比较复杂，一般是用插件来完成，今天我们分享的miniGrid.js也是流布局插件之一，特色是非常轻量级，大小只有2KB，下面来看看介绍。

流布局插件 mini-grid

演示：

minigrid 和其它流布局差不多，窗口缩小时会有动画滑动，当然用户也可以去取消这个动画。

mini-grid-demo

教程：

Step 1: 引入外部文件

为你的网页嵌入对应的JS文件，这里我们只加入

<body>
 ...
 内容
 ...
 <script src="http://henriquea.github.io/minigrid/minigrid.js"></script>
</body>

Step 2: HTML代码

HTML相关代码，栅格使用 .grid-item 这个样式。

<div class="grid">
 <div class="grid-item"></div>
 <div class="grid-item"></div>
 <div class="grid-item"></div>
 <div class="grid-item"></div>
</div>

Step 3: CSS

CSS相关样式

.grid {
 position: relative;
}
.grid-item {
 position: absolute;
}

Step 4: JavaScript

如果你需要定义动画，刚需要加入

<script>
 (function(){
 minigrid('.grid', '.grid-item');
 
 window.addEventListener('resize', function(){
 minigrid('.grid', '.grid-item', 6, animate);
 });
 })();
</script>

Step 4: 动画

使用CSS transition 属性给栅格加入动画

.grid-item {
 transition: .3s ease-in-out;
}

当然如果你想动画表现更出色，可以自己自定义，则需要在第一步嵌入 Dynamics.js 库

function animate(item, x, y, index) {
 dynamics.animate(item, {
 translateX: x,
 translateY: y
 }, {
 type: dynamics.spring,
 duration: 800,
 frequency: 120,
 delay: 100 + index * 30
 });
}
 
minigrid('.grid', '.grid-item', 6, animate);
插件名称：miniGrid
演示地址：http://output.jsbin.com/maroda/7/
下载地址：https://github.com/henriquea/minigrid/releases
赞助商链接

与 、 相关的文章

赞助商链接
设计达人微信交流社区：shejidaren888
喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。
«
»

+ 添加评论2 Responses to “miniGrid：轻量级流布局JS插件”

  1. TTRR - 回复
    2016 年 07 月 27 日 下午 1:01
  2. 嘚瑟deee - 回复
    2015 年 08 月 07 日 上午 9:20

{ 发表评论 }