資訊專欄INFORMATION COLUMN
摘要：看了幾篇博客，了解了它的幾個(gè)常用屬性后，可以快速生成一個(gè)網(wǎng)格布局。同樣是出于使用動(dòng)態(tài)生成布局的需要，誕生了這個(gè)小工具。
作者：云荒杯傾
寫在前面這兩天了解了一下css的grid布局，發(fā)現(xiàn)確實(shí)很好用。看了幾篇博客，了解了它的幾個(gè)常用屬性后，可以快速生成一個(gè)網(wǎng)格布局。相較于傳統(tǒng)的float、定位等顯得更成體系，更規(guī)范，不需要一些hack做法。
雖然grid布局已經(jīng)很好，前端工程師中有一些更多是喜歡通過動(dòng)態(tài)創(chuàng)建div，使用js給div加樣式這種方式來完成自己的工作的。
同樣是出于使用JavaScript動(dòng)態(tài)生成grid布局的需要，誕生了Grid.js這個(gè)小工具。
Grid簡(jiǎn)介Grid.js是一個(gè)使用JavaScript動(dòng)態(tài)創(chuàng)建規(guī)則網(wǎng)格布局、非規(guī)則網(wǎng)格布局的模塊。FE可以通過new Grird(option)創(chuàng)建一個(gè)Grid實(shí)例, 該實(shí)例的UI就呈現(xiàn)為css grid布局。
效果圖先來幾張使用Grid.js生成的效果圖吧。
以下四張效果圖父容器的大小都是600*600像素。
第一張是一個(gè)4X4的網(wǎng)格，其中有3個(gè)網(wǎng)格是非原子大小（1X1）的，即2X2, 2X2, 2X1。
第二張是一個(gè)5X5的規(guī)則網(wǎng)格，所謂規(guī)則網(wǎng)格就是所有子元素都是1X1的大小。
第三張是一個(gè)6X5的網(wǎng)格，其中有5個(gè)非原子大小的網(wǎng)格。
第四張是一個(gè)7X7的網(wǎng)格，其中有4個(gè)非原子大小的網(wǎng)格。
Grid.js使用es6 class語法完成，所以使用方式很簡(jiǎn)單。
通過new Grid(option)即可生成一個(gè)網(wǎng)格實(shí)例。就以效果圖第二張圖生成的5X5網(wǎng)格來說，它的代碼就是：
let grid = new Grid({
container:document.getElementsByClassName("grid")[0],// 必須項(xiàng)
colCount:5,
rowCount:5,
width:600,
height:600,
});
如果你想給每個(gè)網(wǎng)格設(shè)置不同的樣式，就是用對(duì)外API方法setGridStyleByIndex(); 同樣拿效果圖5X5網(wǎng)格來說，那五個(gè)對(duì)角線上網(wǎng)格就做了背景的樣式設(shè)置，它們是通過如下代碼完成的：
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"});
還有一個(gè)問題是怎么拿每個(gè)子元素（小格子）的引用？通過對(duì)外API方法 getGrid(n)。
還有一個(gè)問題是怎么拿所有子元素（小格子）的引用？通過對(duì)外API方法 getGrids()。
let grids = grid.getGrids();
for(let i = 0; i < grids.length; i++){
grids[i].innerHTML = i + 1;
}
上面這段代碼就是拿了所有小網(wǎng)格的引用，然后給網(wǎng)格填充文本內(nèi)容的。示例中每個(gè)小格子的文本內(nèi)容就是每個(gè)小格子在div列表中的索引+1。
Grid.js API考慮到最核心的需求有兩點(diǎn)，一個(gè)是較為簡(jiǎn)單地（至少和直接使用css同樣方便）生成網(wǎng)格布局，第二是生成網(wǎng)格布局后拿到每個(gè)格子的引用，給格子添加內(nèi)容。所以主要說這兩方面。
傳參生成網(wǎng)格實(shí)例怎么生成不同的、規(guī)則的、不規(guī)則的網(wǎng)格實(shí)例，主要看new Grid(option)的時(shí)候你傳的參數(shù)，提供可傳的參數(shù)包括以下。
| 名稱 | 類型 | 簡(jiǎn)介 |
|---|---|---|
| container | htmlDomElement | 父容器，必須項(xiàng) |
| rowCount | number | 網(wǎng)格行數(shù) |
| colCount | number | 網(wǎng)格列數(shù) |
| width | number、% | 父容器寬度 |
| height | number、% | 父容器高度 |
| divCount | number | 實(shí)際格子的多少 |
| gridArea | Array | 那些非1X1格子的占位表示 |
關(guān)于divCount和gridArea數(shù)組的說明：
這兩個(gè)參數(shù)用來生成不規(guī)則網(wǎng)格布局，所以是本模塊的關(guān)鍵。否則，你就只能用本模塊生成n*m的規(guī)則網(wǎng)格了。
我們拿第一張效果圖4X4網(wǎng)格舉例，本來如果不是1、2、3那三個(gè)網(wǎng)格有跨行、跨列的行為，就不需要傳divCount，也不用傳gridArea，模塊會(huì)為你生成4X4=16個(gè)一模一樣的格子。但是由于這三個(gè)較大網(wǎng)格存在，所以，這個(gè)父容器是容不下16個(gè)子元素的，所以，你傳的divCount是什么呢，是在存在非1X1子網(wǎng)格的情況下，父容器正好填滿時(shí)，子網(wǎng)格的數(shù)量，因此就是9.。一般在你拿到設(shè)計(jì)圖的時(shí)候，你就知道這個(gè)布局了，子網(wǎng)格數(shù)目很好算（因?yàn)閷?shí)際場(chǎng)景也不需要?jiǎng)?chuàng)建好幾十乘以好幾十那么瑣碎的格子）。
針對(duì)這三個(gè)非1X1的子網(wǎng)格，我們需要為其每一個(gè)傳一個(gè)數(shù)組，來表示這個(gè)子網(wǎng)格是在父網(wǎng)格的第幾行開始、第幾列開始、跨幾行、跨幾列。即每個(gè)非1X1的子網(wǎng)格，都要傳一個(gè)length為4的數(shù)組。然后把這些數(shù)組再放到一個(gè)外包數(shù)組里面，這個(gè)外包數(shù)組就是gridArea。
對(duì)于效果圖1，gridArea = [[1,1,2,2],[2,3,2,2],[4,1,1,2]]。
整個(gè)4X4網(wǎng)格共有3個(gè)非1X1大小的子網(wǎng)格。
其中[1,1,2,2]就說明這個(gè)4X4的網(wǎng)格中有一個(gè)從第一行第一列開始，跨行跨列都為2的子網(wǎng)格。
目前暴露的API
| 名稱 | 參數(shù)類型 | 簡(jiǎn)介 |
|---|---|---|
| setGridStyleByIndex(n,style) | number,obj | 設(shè)置小格子樣式，第一個(gè)參數(shù)是小格子索引;style是對(duì)象，舉例style={"color":"red"} |
| getGrids() | 無 | 獲取所有子網(wǎng)格div引用 |
| getGrid(n) | number | 獲取某個(gè)子網(wǎng)格 |
這個(gè)模塊可能還不完善，歡迎大家提出寶貴意見。
歡迎關(guān)注，GitHub地址，
請(qǐng)戳這里
另附： 作者博客
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/92435.html
摘要：看了幾篇博客，了解了它的幾個(gè)常用屬性后，可以快速生成一個(gè)網(wǎng)格布局。同樣是出于使用動(dòng)態(tài)生成布局的需要，誕生了這個(gè)小工具。 作者：云荒杯傾 寫在前面 這兩天了解了一下css的grid布局，發(fā)現(xiàn)確實(shí)很好用。看了幾篇博客，了解了它的幾個(gè)常用屬性后，可以快速生成一個(gè)網(wǎng)格布局。相較于傳統(tǒng)的float、定位等顯得更成體系，更規(guī)范，不需要一些hack做法。 雖然grid布局已經(jīng)很好，前端工程師中有一些...
摘要：前端每周清單專注前端領(lǐng)域內(nèi)容，以對(duì)外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點(diǎn)分為新聞熱點(diǎn)開發(fā)教程工程實(shí)踐深度閱讀開源項(xiàng)目巔峰人生等欄目。它能夠?yàn)槲覀兲峁╊愃朴陬A(yù)處理器命名空間等多方面的輔助。 前端每周清單專注前端領(lǐng)域內(nèi)容，以對(duì)外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點(diǎn)；分為新聞熱點(diǎn)、開發(fā)教程、工程實(shí)踐、深度閱讀、開源項(xiàng)目、巔峰人生等欄目。歡迎關(guān)注【前端之巔】微信公眾號(hào)（ID：f...
摘要：一個(gè)叫的人用純重繪并模擬了種不同的移動(dòng)設(shè)備包括可以給你的網(wǎng)站添加不相關(guān)的獨(dú)立組件的一個(gè)庫。每一個(gè)組件都是針對(duì)移動(dòng)設(shè)備定制的，并且它有很多你在傳統(tǒng)的框架中看不到的功能。如果你用開發(fā)移動(dòng)優(yōu)先的網(wǎng)站，并想要網(wǎng)站正常運(yùn)行在低版本的上，可以考慮。 眾所周知，CSS是非常棒的，它使網(wǎng)站看起來很漂亮，可以為網(wǎng)站添加動(dòng)畫，并讓呈現(xiàn)和內(nèi)容分離。去了解CSS的一切是非常難做到的，它只會(huì)變得更加困難,因?yàn)槲?..
摘要：本文來自心譚博客譯文逐步替換，最新文章請(qǐng)見導(dǎo)航頁，歡迎交流翻譯說明這是一篇介紹現(xiàn)代核心特性的文章，并且借助進(jìn)行橫向?qū)Ρ龋浞煮w現(xiàn)了作為一門設(shè)計(jì)語言的快速發(fā)展以及新特性為我們開發(fā)者帶來的強(qiáng)大生產(chǎn)力。 本文來自心譚博客·「譯文」逐步替換Sass，最新文章請(qǐng)見導(dǎo)航頁，歡迎交流??ヽ(°▽°)ノ? 翻譯說明 這是一篇介紹現(xiàn)代 css 核心特性的文章，并且借助 sass 進(jìn)行橫向?qū)Ρ龋浞煮w現(xiàn)了...
閱讀 3088·2021-10-11 10:58
閱讀 2001·2021-09-24 09:47
閱讀 508·2019-08-30 14:19
閱讀 1701·2019-08-30 13:58
閱讀 1448·2019-08-29 15:26
閱讀 645·2019-08-26 13:45
閱讀 2144·2019-08-26 11:53
閱讀 1777·2019-08-26 11:30
