html grid插件,miniGrid：轻量级流布局JS插件

miniGrid：轻量级流布局JS插件

Sponsor

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

演示：

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

教程：

Step 1: 引入外部文件

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

...

内容

...

Step 2: HTML代码

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

Step 3: CSS

CSS相关样式

.grid {

position: relative;

}

.grid-item {

position: absolute;

}

Step 4: JavaScript

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

(function(){

minigrid('.grid', '.grid-item');

window.addEventListener('resize', function(){

minigrid('.grid', '.grid-item', 6, animate);

});

})();

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);

推荐：查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com

交流：为设计新人提供的设计交流群，请加入UI设计交流群，分享经验、接单、求职、聊设计。

赞助商链接

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。

版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。

TTRR -

2016 年 07 月 27 日 下午 1:01

嘚瑟deee -

2015 年 08 月 07 日 上午 9:20

{ 发表评论 }

姓 名 (必填)

邮 件 (必填)

网 站