插件描述:该瀑布流插件的大小只有2KB,纯js编写,没有任何外部依赖
简要教程
minigrid是一款非常实用的动态网格瀑布流布局js插件。该瀑布流插件的大小只有2KB,纯js编写,没有任何外部依赖。你可以使用CSS3CSS3动画
来制作简单的网格动画,也可以和dynamics.js集合来制作炫酷的网格动画。
安装
你可以通过nmp或bower来安装该网格瀑布流插件。npm install minigrid
bower install minigrid
使用方法
使用时需要引入minigrid.js文件。
HTML结构
该网格瀑布流的HTML结构使用嵌套
CSS样式
你需要为这个网格瀑布流布局设置一些基本样式。包裹容器div.grid建议设置为相对定位方式。.grid {
position: relative;
}
然后为网格项设置决定定位方式。.grid-item {
position: absolute;
}
初始化插件
在页面加载之后,可以通过下面的方法来初始化该网格瀑布流插件。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的函数。function animate(el, x, y, index) {
// 在这里可以使用你的动画库来制作动画
}
minigrid('.grid', '.grid-item', 6, animate);
响应式
要制作响应式的网格布局,你可以为window对象添加事件监听。window.addEventListener('resize', function(){
minigrid('.grid', '.grid-item');
});
动画
你可以使用CSS3的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);