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