miniGrid：輕量級流布局JS插件

Sponsor

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

演示：

minigrid 和其它流布局差不多，窗口縮小時會有動畫滑動，當然用戶也可以去取消這個動畫。

教程：

Step 1: 引入外部文件

為你的網頁嵌入對應的JS文件，這里我們只加入

...

內容

...

Step 2: HTML代碼

HTML相關代碼，柵格使用 .grid-item 這個樣式。

Step 3: CSS

CSS相關樣式

.grid {

position: relative;

}

.grid-item {

position: absolute;

}

Step 4: JavaScript

如果你需要定義動畫，剛需要加入

(function(){

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

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

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

});

})();

Step 4: 動畫

使用CSS 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);

推薦：查看最受歡迎的 301 個設計網站 → http://hao.shejidaren.com

交流：為設計新人提供的設計交流群，請加入UI設計交流群，分享經驗、接單、求職、聊設計。

贊助商鏈接

贊助商鏈接

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

版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。

TTRR -

2016 年 07 月 27 日 下午 1:01

嘚瑟deee -

2015 年 08 月 07 日 上午 9:20

{ 發表評論 }

姓 名 (必填)

郵 件 (必填)

網 站

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。