摘要：看了几篇博客，了解了它的几个常用属性后，可以快速生成一个网格布局。同样是出于使用动态生成布局的需要，诞生了这个小工具。
作者：云荒杯倾
写在前面这两天了解了一下css的grid布局，发现确实很好用。看了几篇博客，了解了它的几个常用属性后，可以快速生成一个网格布局。相较于传统的float、定位等显得更成体系，更规范，不需要一些hack做法。
虽然grid布局已经很好，前端工程师中有一些更多是喜欢通过动态创建div，使用js给div加样式这种方式来完成自己的工作的。
同样是出于使用JavaScript动态生成grid布局的需要，诞生了Grid.js这个小工具。
Grid简介Grid.js是一个使用JavaScript动态创建规则网格布局、非规则网格布局的模块。FE可以通过new Grird(option)创建一个Grid实例, 该实例的UI就呈现为css grid布局。
效果图先来几张使用Grid.js生成的效果图吧。
以下四张效果图父容器的大小都是600*600像素。
第一张是一个4X4的网格，其中有3个网格是非原子大小（1X1）的，即2X2, 2X2, 2X1。
第二张是一个5X5的规则网格，所谓规则网格就是所有子元素都是1X1的大小。
第三张是一个6X5的网格，其中有5个非原子大小的网格。
第四张是一个7X7的网格，其中有4个非原子大小的网格。
Grid.js使用es6 class语法完成，所以使用方式很简单。
通过new Grid(option)即可生成一个网格实例。就以效果图第二张图生成的5X5网格来说，它的代码就是：
let grid = new Grid({
container:document.getElementsByClassName("grid")[0],// 必须项
colCount:5,
rowCount:5,
width:600,
height:600,
});
如果你想给每个网格设置不同的样式，就是用对外API方法setGridStyleByIndex(); 同样拿效果图5X5网格来说，那五个对角线上网格就做了背景的样式设置，它们是通过如下代码完成的：
grid.setGridStyleByIndex(0, {"background": "red"});
grid.setGridStyleByIndex(6, {"background": "green"});
grid.setGridStyleByIndex(12, {"background": "yellow"});
grid.setGridStyleByIndex(18, {"background": "blue"});
grid.setGridStyleByIndex(24, {"background": "orange"});
还有一个问题是怎么拿每个子元素（小格子）的引用？通过对外API方法 getGrid(n)。
还有一个问题是怎么拿所有子元素（小格子）的引用？通过对外API方法 getGrids()。
let grids = grid.getGrids();
for(let i = 0; i < grids.length; i++){
grids[i].innerHTML = i + 1;
}
上面这段代码就是拿了所有小网格的引用，然后给网格填充文本内容的。示例中每个小格子的文本内容就是每个小格子在div列表中的索引+1。
Grid.js API考虑到最核心的需求有两点，一个是较为简单地（至少和直接使用css同样方便）生成网格布局，第二是生成网格布局后拿到每个格子的引用，给格子添加内容。所以主要说这两方面。
传参生成网格实例怎么生成不同的、规则的、不规则的网格实例，主要看new Grid(option)的时候你传的参数，提供可传的参数包括以下。
| 名称 | 类型 | 简介 |
|---|---|---|
| container | htmlDomElement | 父容器，必须项 |
| rowCount | number | 网格行数 |
| colCount | number | 网格列数 |
| width | number、% | 父容器宽度 |
| height | number、% | 父容器高度 |
| divCount | number | 实际格子的多少 |
| gridArea | Array | 那些非1X1格子的占位表示 |
关于divCount和gridArea数组的说明：
这两个参数用来生成不规则网格布局，所以是本模块的关键。否则，你就只能用本模块生成n*m的规则网格了。
我们拿第一张效果图4X4网格举例，本来如果不是1、2、3那三个网格有跨行、跨列的行为，就不需要传divCount，也不用传gridArea，模块会为你生成4X4=16个一模一样的格子。但是由于这三个较大网格存在，所以，这个父容器是容不下16个子元素的，所以，你传的divCount是什么呢，是在存在非1X1子网格的情况下，父容器正好填满时，子网格的数量，因此就是9.。一般在你拿到设计图的时候，你就知道这个布局了，子网格数目很好算（因为实际场景也不需要创建好几十乘以好几十那么琐碎的格子）。
针对这三个非1X1的子网格，我们需要为其每一个传一个数组，来表示这个子网格是在父网格的第几行开始、第几列开始、跨几行、跨几列。即每个非1X1的子网格，都要传一个length为4的数组。然后把这些数组再放到一个外包数组里面，这个外包数组就是gridArea。
对于效果图1，gridArea = [[1,1,2,2],[2,3,2,2],[4,1,1,2]]。
整个4X4网格共有3个非1X1大小的子网格。
其中[1,1,2,2]就说明这个4X4的网格中有一个从第一行第一列开始，跨行跨列都为2的子网格。
目前暴露的API
| 名称 | 参数类型 | 简介 |
|---|---|---|
| setGridStyleByIndex(n,style) | number,obj | 设置小格子样式，第一个参数是小格子索引;style是对象，举例style={"color":"red"} |
| getGrids() | 无 | 获取所有子网格div引用 |
| getGrid(n) | number | 获取某个子网格 |
这个模块可能还不完善，欢迎大家提出宝贵意见。
欢迎关注，GitHub地址，
请戳这里
另附： 作者博客
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/112993.html
摘要：看了几篇博客，了解了它的几个常用属性后，可以快速生成一个网格布局。同样是出于使用动态生成布局的需要，诞生了这个小工具。 作者：云荒杯倾 写在前面 这两天了解了一下css的grid布局，发现确实很好用。看了几篇博客，了解了它的几个常用属性后，可以快速生成一个网格布局。相较于传统的float、定位等显得更成体系，更规范，不需要一些hack做法。 虽然grid布局已经很好，前端工程师中有一些...
摘要：现在，我们来介绍年推荐给设计师的款框架。是一个响应式的以及像素宽度的网格框架，支持平板和手机屏幕显示。框架是一个众多自定义代码组合成的混合体，是一款富有弹性的框架，用来进行响应式网页的快速原型开发。 现在，我们来介绍 2014 年推荐给 Web 设计师的 15 款 HTML&CSS 框架。阅读下面的框架列表，跟我们分享你的看法吧：） CSS 框架 1) Toast Toast ...
摘要：前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点分为新闻热点开发教程工程实践深度阅读开源项目巅峰人生等栏目。它能够为我们提供类似于预处理器命名空间等多方面的辅助。 前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号（ID：f...
摘要：一个叫的人用纯重绘并模拟了种不同的移动设备包括可以给你的网站添加不相关的独立组件的一个库。每一个组件都是针对移动设备定制的，并且它有很多你在传统的框架中看不到的功能。如果你用开发移动优先的网站，并想要网站正常运行在低版本的上，可以考虑。 众所周知，CSS是非常棒的，它使网站看起来很漂亮，可以为网站添加动画，并让呈现和内容分离。去了解CSS的一切是非常难做到的，它只会变得更加困难,因为我...
摘要：本文来自心谭博客译文逐步替换，最新文章请见导航页，欢迎交流翻译说明这是一篇介绍现代核心特性的文章，并且借助进行横向对比，充分体现了作为一门设计语言的快速发展以及新特性为我们开发者带来的强大生产力。 本文来自心谭博客·「译文」逐步替换Sass，最新文章请见导航页，欢迎交流✿✿ヽ(°▽°)ノ✿ 翻译说明 这是一篇介绍现代 css 核心特性的文章，并且借助 sass 进行横向对比，充分体现了...
阅读 1542·2021-11-22 15:33
阅读 1754·2021-10-08 10:04
阅读 3395·2021-08-27 13:12
阅读 3282·2019-08-30 13:06
阅读 1348·2019-08-29 16:43
阅读 1284·2019-08-29 16:40
阅读 597·2019-08-29 16:15
阅读 2528·2019-08-29 14:13
