JSを使って様々なグリッドレイアウトを素早く生成するツール Gridの紹介

ここ 2 日間で CSS のグリッド レイアウトについて学び、それが本当に便利であることがわかりました。いくつかのブログを読み、その共通のプロパティのいくつかを理解したら、グリッド レイアウトをすぐに生成できます。 Grid.js は、従来の float や位置決めなどと比較して、より体系的かつ標準化されており、規則的なグリッド レイアウトと不規則なグリッド レイアウトを動的に作成するための JavaScript を使用するモジュールです。 FE は new Grird(オプション) を使用して Grid インスタンスを作成でき、インスタンスの UI は CSS グリッド レイアウトとして表示されます。いくつかのハックが必要です。

グリッド レイアウトはすでに非常に優れていますが、一部のフロントエンド エンジニアは、p を動的に作成し、js を使用して p にスタイルを追加することで作業を完了することを好みます。

また、グリッド レイアウトを動的に生成するために JavaScript を使用する必要性から、小さなツール Grid.js が生まれました。

レンダリング

Grid.jsを使用して生成されたいくつかのレンダリングから始めましょう。
次の 4 つのレンダリングの親コンテナのサイズはすべて 600*600 ピクセルです。

最初のグリッドは 4X4 グリッドで、そのうちの 3 つは非原子サイズ (1X1)、つまり 2X2、2X2、2X1 です。

2 番目の画像は 5X5 の規則的なグリッドです。いわゆる規則的なグリッドは、すべてのサブ要素のサイズが 1X1 であることを意味します。

3 番目の写真は、5 つの非アトミック サイズのグリッドを含む 6X5 グリッドです。

4 番目の写真は、4 つの非アトミック サイズのグリッドを含む 7X7 グリッドです。

Grid.jsはes6クラスの構文で完成しているので使い方は非常に簡単です。 new Grid(オプション)を通じてグリッドインスタンスを生成できます。レンダリングの 2 番目の画像に基づいて生成された 5X5 グリッドのコードは次のとおりです:

<span style="font-size: 14px;">let grid = new Grid({<br>            container:document.getElementsByClassName('grid')[0],// 必须项<br>            colCount:5,<br>            rowCount:5,<br>            width:600,<br>            height:600,<br>        });<br></span>

各グリッドに異なるスタイルを設定したい場合は、外部 API メソッド setGridStyleByIndex() を使用します。例としてレンダリング内のグリッドを使用します。背景スタイルの設定には 5 つの斜めのグリッドが使用されます。これらは次のコードによって完了します。外部 API メソッド

getGrid(n) を介して。 別の質問は、すべてのサブ要素 (小さなグリッド) の参照を取得する方法です。外部 API メソッド getGrids() を介して。

<span style="font-size: 14px;">grid.setGridStyleByIndex(0, {"background": "red"});<br>grid.setGridStyleByIndex(6, {"background": "green"});<br>grid.setGridStyleByIndex(12, {"background": "yellow"});<br>grid.setGridStyleByIndex(18, {"background": "blue"});<br>grid.setGridStyleByIndex(24, {"background": "orange"});<br></span>

上記のコードは、すべての小さなグリッドの参照を取得し、グリッドにテキスト コンテンツを埋めます。この例では、各小さなグリッドのテキスト コンテンツは、p リスト内の各小さなグリッドのインデックス + 1 です。
Grid.js API

最も核となるニーズを考慮すると、2 つのポイントがあります。1 つは比較的簡単に (少なくとも CSS を直接使用するのと同じくらい便利に) グリッド レイアウトを生成することです。もう 1 つは、グリッド レイアウトを作成し、それを使用して各グリッドを参照し、グリッドにコンテンツを追加します。したがって、主にこれら 2 つの側面について説明します。

パラメータを渡してグリッドインスタンスを生成する

異なる、規則的、および不規則なグリッドインスタンスを生成する方法は、主に新しいグリッド（オプション）を使用するときに渡すパラメータに依存します。渡すことができるパラメータは次のとおりです。 。

名前	タイプ	概要
コンテナ	htmlDomElement	親コンテナ、必須アイテム
rowCount	number	グリッド行数
colCount	number	グリッド列数
幅	number、%	親コンテナの幅
高さ	数値、%	親コンテナの高さ
pCount	数値	実際のグリッドの数
gridArea	配列	非1X1グリッドのプレースホルダー表現

pCountとgridArea配列の説明:
これらの2つのパラメータは不規則なグリッドレイアウトを生成するために使用されるため、このモジュールキー。それ以外の場合、このモジュールは n*m 個の規則的なグリッドを生成するためにのみ使用できます。

最初のレンダリングの 4X4 グリッドを例に挙げてみましょう。元々、3 つのグリッド 1、2、および 3 に行間および列間動作がある場合、pCount または GridArea を渡す必要はありません。このモジュールは 4X4=16 個の同一のグリッドを生成します。ただし、これら 3 つの大きなグリッドが存在するため、この親コンテナーは 16 個の子要素を収容できません。では、渡す pCount は何ですか? 1X1 以外の子グリッドがある場合、親コンテナーは適切であることを意味します。塗りつぶされたときのサブグリッドの数は 9. です。通常、設計図を入手した時点で、レイアウトはすでにわかっており、サブグリッドの数は簡単に計算できます (実際のシーンでは、数十倍の単純なグリッドを作成する必要がないため)。

これら 3 つの非 1X1 サブグリッドについては、このサブグリッドが複数の列にまたがる親グリッドのどの行、列、スパンを示すために、それぞれに配列を渡す必要があります。つまり、1X1 以外の各サブグリッドは長さ 4 の配列を渡す必要があります。次に、これらの配列をアウトソーシング配列に置きます。このアウトソーシング配列は、gridArea です。

レンダリング 1 の場合、gridArea = [[1,1,2,2],[2,3,2,2],[4,1,1,2]]。
4X4 グリッド全体には、1X1 以外のサイズのサブグリッドが 3 つあります。
[1,1,2,2] は、この 4X4 グリッドの最初の行と最初の列から始まるサブグリッドがあり、行と列にわたる値が 2 であることを意味します。

APIインターフェース

現在公開されているAPI

名前	パラメータタイプ	概要
setGridStyleByIndex(n,style)	number,obj	最初のパラメータは小さいグリッドのインデックスです。たとえば、style={"color":"red"}
getGrids()。	なし	すべてのサブグリッドp参照を取得
getGrid(n)	number	特定のサブグリッドを取得

関連するおすすめ:

CSSグリッドレイアウトのサンプルコード

_jqueryを使用したjQueryモバイルページ開発におけるui-gridグリッドレイアウトの詳細説明

グリッドレイアウト方法の詳細説明

以上がJSを使って様々なグリッドレイアウトを素早く生成するツール Gridの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。