当前位置:主页 > 网页特效 > 瀑布流特效 >

最小的响应式动态网格瀑布流布局js插件

发布时间:2018/06/03 来源:互联网 浏览: 关键词:响应式 瀑布流 
最小的响应式动态网格瀑布流布局js插件 最小的响应式动态网格瀑布流布局js插件
阿里云
简要教程

minigrid是一款非常实用的动态网格瀑布流布局js插件。该瀑布流插件的大小只有2KB,纯js编写,没有任何外部依赖。你可以使用CSS3CSS3动画

来制作简单的网格动画,也可以和dynamics.js集合来制作炫酷的网格动画。


 安装

你可以通过nmp或bower来安装该网格瀑布流插件。

npm install minigrid
bower install minigrid               

 使用方法

使用时需要引入minigrid.js文件。

<scriptsrc="js/minigrid.js"></script>               
 HTML结构

该网格瀑布流的HTML结构使用嵌套<div>的HTML结构。

<divclass="grid">
  <divclass="grid-item"></div>
  <divclass="grid-item"></div>
  <divclass="grid-item"></div>
  <divclass="grid-item"></div>
</div>   
 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: .3s ease-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); 

共有人阅读,期待你的评论!评论
Top