簡要教程

minigrid是一款非常實用的動態網格瀑布流布局js插件。該瀑布流插件的大小只有2KB，純js編寫，沒有任何外部依賴。你可以使用CSS3CSS3動畫

來制作簡單的網格動畫，也可以和dynamics.js集合來制作炫酷的網格動畫。

安裝

你可以通過nmp或bower來安裝該網格瀑布流插件。

• npm install minigrid

• bower install minigrid                

使用方法

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

<script src="js/minigrid.js"></script>

HTML結構

該網格瀑布流的HTML結構使用嵌套<div>的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建議設置為相對定位方式。

.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);