基于JS快速生成各種網格布局工具Grid介紹

scwang90 發布于2019-08-22 13:47 / 1834人閱讀

摘要：看了幾篇博客，了解了它的幾個常用屬性后，可以快速生成一個網格布局。同樣是出于使用動態生成布局的需要，誕生了這個小工具。

作者：云荒杯傾

寫在前面

這兩天了解了一下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網格舉例，本來如果不是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接口

目前暴露的API

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

最后

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

歡迎關注，GitHub地址，

請戳這里

另附：作者博客

云服務器 GPU云服務器 js怎么快速生成表格數據 java中各種布局網格布局 js給grid控件綁定數據

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/92435.html

基于JS快速生成各種網格布局工具Grid介紹

摘要：看了幾篇博客，了解了它的幾個常用屬性后，可以快速生成一個網格布局。同樣是出于使用動態生成布局的需要，誕生了這個小工具。作者：云荒杯傾寫在前面這兩天了解了一下css的grid布局，發現確實很好用。看了幾篇博客，了解了它的幾個常用屬性后，可以快速生成一個網格布局。相較于傳統的float、定位等顯得更成體系，更規范，不需要一些hack做法。雖然grid布局已經很好，前端工程師中有一些...

waltr 2019-08-29 14:13 評論0 收藏0
前端每周清單半年盤點之 CSS 篇

摘要：前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點分為新聞熱點開發教程工程實踐深度閱讀開源項目巔峰人生等欄目。它能夠為我們提供類似于預處理器命名空間等多方面的輔助。前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點；分為新聞熱點、開發教程、工程實踐、深度閱讀、開源項目、巔峰人生等欄目。歡迎關注【前端之巔】微信公眾號（ID：f...

RaoMeng 2019-08-29 13:21 評論0 收藏0
【譯】編寫更好的CSS必備的40個工具

摘要：一個叫的人用純重繪并模擬了種不同的移動設備包括可以給你的網站添加不相關的獨立組件的一個庫。每一個組件都是針對移動設備定制的，并且它有很多你在傳統的框架中看不到的功能。如果你用開發移動優先的網站，并想要網站正常運行在低版本的上，可以考慮。眾所周知，CSS是非常棒的，它使網站看起來很漂亮，可以為網站添加動畫，并讓呈現和內容分離。去了解CSS的一切是非常難做到的，它只會變得更加困難,因為我...

moven_j 2019-08-28 18:09 評論0 收藏0
「翻譯」逐步替換Sass

摘要：本文來自心譚博客譯文逐步替換，最新文章請見導航頁，歡迎交流翻譯說明這是一篇介紹現代核心特性的文章，并且借助進行橫向對比，充分體現了作為一門設計語言的快速發展以及新特性為我們開發者帶來的強大生產力。本文來自心譚博客·「譯文」逐步替換Sass，最新文章請見導航頁，歡迎交流??ヽ(°▽°)ノ? 翻譯說明這是一篇介紹現代 css 核心特性的文章，并且借助 sass 進行橫向對比，充分體現了...

explorer_ddf 2019-08-30 11:13 評論0 收藏0