javascript
html grid插件,miniGrid:轻量级流布局JS插件
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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 全国通用计算机一级考试模板,共享WPS中
- 下一篇: 001_JSON-lib下载和文档