minigrid.js--动态网格瀑布流插件

忘是亡心i 2021-09-10 13:36 417阅读 0赞

minigrid是一款非常实用的动态网格瀑布流布局js插件。该瀑布流插件的大小只有2KB，纯js编写，没有任何外部依赖。你可以使用CSS3CSS3动画来制作简单的网格动画，也可以和dynamics.js集合来制作炫酷的网格动画。

> 安装

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

npm install minigrid
    bower install minigrid

> 使用方法

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

> HTML结构

该网格瀑布流的HTML结构使用嵌套<div>的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);