HTML & CSS ? miniGrid：輕量級流布局JS插件

miniGrid：輕量級流布局JS插件

發表于: HTML & CSS. 評論 (2)
Sponsor

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

流布局插件 mini-grid

演示：

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

mini-grid-demo

教程：

Step 1: 引入外部文件

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

<body>
 ...
 內容
 ...
 <script src="http://henriquea.github.io/minigrid/minigrid.js"></script>
</body>

Step 2: HTML代碼

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

<div class="grid">
 <div class="grid-item"></div>
 <div class="grid-item"></div>
 <div class="grid-item"></div>
 <div class="grid-item"></div>
</div>

Step 3: CSS

CSS相關樣式

.grid {
 position: relative;
}
.grid-item {
 position: absolute;
}

Step 4: JavaScript

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

<script>
 (function(){
 minigrid('.grid', '.grid-item');
 
 window.addEventListener('resize', function(){
 minigrid('.grid', '.grid-item', 6, animate);
 });
 })();
</script>

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);
插件名稱：miniGrid
演示地址：http://output.jsbin.com/maroda/7/
下載地址：https://github.com/henriquea/minigrid/releases
推薦：查看最受歡迎的 301 個設計網站 → http://hao.shejidaren.com
交流：為設計新人提供的設計交流群，請加入UI設計交流群，分享經驗、接單、求職、聊設計。
贊助商鏈接

與 、 相關的文章

贊助商鏈接
設計達人微信交流社區：shejidaren888
喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。
«
»

+ 添加評論2 Responses to “miniGrid：輕量級流布局JS插件”

  1. TTRR - 回復
    2016 年 07 月 27 日 下午 1:01
  2. 嘚瑟deee - 回復
    2015 年 08 月 07 日 上午 9:20

{ 發表評論 }