miniGrid：輕量級(jí)流布局JS插件

Sponsor

流布局我想不少用戶知道，這些布局前端代碼比較復(fù)雜，一般是用插件來完成，今天我們分享的miniGrid.js也是流布局插件之一，特色是非常輕量級(jí)，大小只有2KB，下面來看看介紹。

演示：

minigrid 和其它流布局差不多，窗口縮小時(shí)會(huì)有動(dòng)畫滑動(dòng)，當(dāng)然用戶也可以去取消這個(gè)動(dòng)畫。

教程：

Step 1: 引入外部文件

為你的網(wǎng)頁嵌入對(duì)應(yīng)的JS文件，這里我們只加入

...

內(nèi)容

...

Step 2: HTML代碼

HTML相關(guān)代碼，柵格使用 .grid-item 這個(gè)樣式。

Step 3: CSS

CSS相關(guān)樣式

.grid {

position: relative;

}

.grid-item {

position: absolute;

}

Step 4: JavaScript

如果你需要定義動(dòng)畫，剛需要加入

(function(){

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

window.addEventListener('resize', function(){

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

});

})();

Step 4: 動(dòng)畫

使用CSS transition 屬性給柵格加入動(dòng)畫

.grid-item {

transition: .3s ease-in-out;

}

當(dāng)然如果你想動(dòng)畫表現(xiàn)更出色，可以自己自定義，則需要在第一步嵌入 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);

推薦：查看最受歡迎的 301 個(gè)設(shè)計(jì)網(wǎng)站 → http://hao.shejidaren.com

交流：為設(shè)計(jì)新人提供的設(shè)計(jì)交流群，請(qǐng)加入U(xiǎn)I設(shè)計(jì)交流群，分享經(jīng)驗(yàn)、接單、求職、聊設(shè)計(jì)。

贊助商鏈接

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關(guān)注我們的微博，謝謝支持。

版權(quán)：除非注明，本站文章均為原創(chuàng)文章，轉(zhuǎn)載請(qǐng)聯(lián)系我們授權(quán)，否則禁止轉(zhuǎn)載。

TTRR -

2016 年 07 月 27 日 下午 1:01

嘚瑟deee -

2015 年 08 月 07 日 上午 9:20

{ 發(fā)表評(píng)論 }

姓 名 (必填)

郵 件 (必填)

網(wǎng) 站

總結(jié)

以上是生活随笔為你收集整理的html grid插件,miniGrid：轻量级流布局JS插件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。