基於JS快速生成各類網格佈局工具Grid介紹

做者：雲荒杯傾

寫在前面

這兩天瞭解了一下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使用

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網格舉例，原本若是不是一、二、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接口

目前暴露的API

名稱	參數類型	簡介
setGridStyleByIndex(n,style)	number,obj	設置小格子樣式，第一個參數是小格子索引;style是對象，舉例style={"color":"red"}
getGrids()	無	獲取全部子網格div引用
getGrid(n)	number	獲取某個子網格

最後

這個模塊可能還不完善，歡迎你們提出寶貴意見。

歡迎關注，GitHub地址，

請戳這裏

另附： 做者博客