本文介绍了一个轻量级的流布局插件miniGrid.js，仅2KB大小。通过简单的四步设置即可实现响应式的网格布局效果，支持窗口调整大小时的动画过渡。
流布局我想不少用户知道，这些布局前端代码比较复杂，一般是用插件来完成，今天我们分享的miniGrid.js也是流布局插件之一，特色是非常轻量级，大小只有2KB，下面来看看介绍。
演示：
minigrid 和其它流布局差不多，窗口缩小时会有动画滑动，当然用户也可以去取消这个动画。
教程：
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;
}
扫一扫
423
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
