CSS图书馆 » HTML & CSS » miniGrid:轻量级流布局JS插件

miniGrid:轻量级流布局JS插件

发表于: HTML & CSS. 评论 (2)
赞助商链接

流布局我想不少用户知道,这些布局前端代码比较复杂,一般是用插件来完成,今天我们分享的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设计QQ群,与50000名设计师交流设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。