当前位置：首页 > 网页特效 > 其他

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

分类：其他日期：2024-05-14 点击(0) 评论(0)

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

简介

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

```html
<script src="js/minigrid.js"></script> 
```               
#####  HTML结构
该网格瀑布流的HTML结构使用嵌套<div>的HTML结构。

```html
<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建议设置为相对定位方式。

```html
.grid {
  position: relative;
}                
然后为网格项设置决定定位方式。

.grid-item {
  position: absolute;
}      
```          
#####  初始化插件
在页面加载之后，可以通过下面的方法来初始化该网格瀑布流插件。

```html
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的函数。

```javascript
function animate(el, x, y, index) {
  // 在这里可以使用你的动画库来制作动画
}

minigrid('.grid', '.grid-item', 6, animate);  
```              
#####  响应式
要制作响应式的网格布局，你可以为window对象添加事件监听。

```html
window.addEventListener('resize', function(){
  minigrid('.grid', '.grid-item');
});  
```              
#####  动画
你可以使用CSS3的transition来制作简单的网格动画效果。

```html
.grid-item {
  transition: .3s ease-in-out;
}  
```              
或者你可以结合Dynamics.js动画库来制作更为复杂和炫酷的网格动画效果。

```html
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);  
```

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果