最小的響應(yīng)式動態(tài)網(wǎng)格瀑布流布局js插件

簡要教程

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

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

安裝

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

• npm install minigrid

• bower install minigrid                

使用方法

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

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

HTML結(jié)構(gòu)

該網(wǎng)格瀑布流的HTML結(jié)構(gòu)使用嵌套<div>的HTML結(jié)構(gòu)。

<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樣式

你需要為這個網(wǎng)格瀑布流布局設(shè)置一些基本樣式。包裹容器div.grid建議設(shè)置為相對定位方式。

.grid {
  position: relative;
}

然后為網(wǎng)格項設(shè)置決定定位方式。

.grid-item {
  position: absolute;
}

初始化插件

在頁面加載之后，可以通過下面的方法來初始化該網(wǎng)格瀑布流插件。

minigrid('.grid', '.grid-item');

API

構(gòu)造函數(shù)

• minigrid(containerSelector, itemSelector, gutter, animate, done)                

• containerSelector：String。包裹容器的選擇器。該參數(shù)必須指定。

• itemSelector：String。網(wǎng)格項的選擇器。該參數(shù)必須指定。

• gutter：Number。網(wǎng)格之間的間隙。默認(rèn)值為6。

• animate：function。網(wǎng)格動畫?？蛇x項。

• done：function。網(wǎng)格更新之后的回調(diào)函數(shù)。

animate參數(shù)：

該參數(shù)是一個帶element，x，y和index的函數(shù)。

function animate(el, x, y, index) {
  // 在這里可以使用你的動畫庫來制作動畫
}
minigrid('.grid', '.grid-item', 6, animate);

響應(yīng)式

要制作響應(yīng)式的網(wǎng)格布局，你可以為window對象添加事件監(jiān)聽。

window.addEventListener('resize', function(){
  minigrid('.grid', '.grid-item');
});

動畫

你可以使用CSS3的transition來制作簡單的網(wǎng)格動畫效果。

.grid-item {
  transition: .3s ease-in-out;
}

或者你可以結(jié)合Dynamics.js動畫庫來制作更為復(fù)雜和炫酷的網(wǎng)格動畫效果。

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