Minigrid:简约漂亮的网页布局栅格系统

Minigrid 是一套简约漂亮的网页布局栅格系统,当你置于网站的时候,可以看到流畅的过渡动效。

流布局我想不少用户知道,这些布局前端代码比较复杂,一般是用插件来完成,今天我们分享的miniGrid.js也是流布局插件之一,特色是非常轻量级,大小只有2KB,下面来看看介绍。进入官网后,会在首页看到下载字样。

minigridminigrid1

Minigrid演示:

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

mini-grid-demo

Minigrid教程:

Step 1: 引入外部文件

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

Step 2: HTML代码

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

Step 3: CSS

CSS相关样式

Step 4: JavaScript

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

Step 5: 动画

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

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

演示地址:http://output.jsbin.com/maroda/7/

下载地址:https://github.com/henriquea/minigrid/releases

官方网站:http://alves.im/minigrid/

1 收藏

资源整理者简介:单╰(*´︶`*)╯

爱创作,爱画画 个人主页 · 贡献了12个资源


直接登录

推荐关注

按分类快速查找

关于资源导航
  • 伯乐在线资源导航收录优秀的工具资源。内容覆盖开发、设计、产品和管理等IT互联网行业相关的领域。目前已经收录 1439 项工具资源。
    推送伯乐头条热点内容微信号:jobbole 分享干货的技术类微信号:iProgrammer