插件描述：该瀑布流插件的大小只有2KB，纯js编写，没有任何外部依赖
简要教程
minigrid是一款非常实用的动态网格瀑布流布局js插件。该瀑布流插件的大小只有2KB，纯js编写，没有任何外部依赖。你可以使用CSS3CSS3动画
来制作简单的网格动画，也可以和dynamics.js集合来制作炫酷的网格动画。
安装
你可以通过nmp或bower来安装该网格瀑布流插件。npm install minigrid
bower install minigrid
使用方法
使用时需要引入minigrid.js文件。
HTML结构
该网格瀑布流的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的函数。functionanimate(el,x,y,index){
//在这里可以使用你的动画库来制作动画
}
minigrid('.grid','.grid-item',6,animate);
响应式
要制作响应式的网格布局，你可以为window对象添加事件监听。window.addEventListener('resize',function(){
minigrid('.grid','.grid-item');
});
动画
你可以使用CSS3的transition来制作简单的网格动画效果。.grid-item{
transition:.3sease-in-out;
}
或者你可以结合Dynamics.js动画库来制作更为复杂和炫酷的网格动画效果。functionanimate(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);
