minigrid是一款非常实用的动态网格瀑布流布局js插件。该瀑布流插件的大小只有2KB，纯js编写，没有任何外部依赖。
你可以使用CSS3动画来制作简单的网格动画，也可以和dynamics.js集合来制作炫酷的网格动画。
安装
你可以通过nmp或bower来安装该网格瀑布流插件。
1 2 | npm install minigridbower install minigrid |
使用方法
使用时需要引入minigrid.js文件。
1 | <script src="js/minigrid.js"></script> |
HTML结构
该网格瀑布流的HTML结构使用嵌套<div>的HTML结构。
1 2 3 4 5 6 | <div class="grid"> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div></div> |
CSS样式
你需要为这个网格瀑布流布局设置一些基本样式。包裹容器div.grid建议设置为相对定位方式。
1 2 3 | .grid { position: relative;} |
然后为网格项设置决定定位方式。
1 2 3 | .grid-item { position: absolute;} |
初始化插件
在页面加载之后，可以通过下面的方法来初始化该网格瀑布流插件。
1 | minigrid('.grid', '.grid-item'); |
API
构造函数
minigrid(containerSelector, itemSelector, gutter, animate, done)
containerSelector：String。包裹容器的选择器。该参数必须指定。
itemSelector：String。网格项的选择器。该参数必须指定。
gutter：Number。网格之间的间隙。默认值为6。
animate：function。网格动画。可选项。
done：function。网格更新之后的回调函数。
animate参数：
该参数是一个带element，x，y和index的函数。
1 2 3 4 | function animate(el, x, y, index) { // 在这里可以使用你的动画库来制作动画}minigrid('.grid', '.grid-item', 6, animate); |
响应式
要制作响应式的网格布局，你可以为window对象添加事件监听。
1 2 3 | window.addEventListener('resize', function(){ minigrid('.grid', '.grid-item');}); |
动画
你可以使用CSS3的transition来制作简单的网格动画效果。
1 2 3 | .grid-item { transition: .3s ease-in-out;} |
或者你可以结合Dynamics.js动画库来制作更为复杂和炫酷的网格动画效果。
1 2 3 4 5 6 7 8 9 10 11 12 | 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); |
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： 仿今日头条滚动轮播banner图(原创)
- 下一个特效： 纯CSS水平导航(原创)