9ボックスグリッドの原則を用いたHTMLページレイアウト

プリアンブル

ナインボックスグリッドといえば、あのナインボックスフォンデュ(O(∩_∩)Oハハ〜)を思い浮かべないわけにはいきません。実際には、主要なサイトで9ペインのレイアウトは基本的に適用され、もちろん、ここで9ペインは、一般的な基準（O（∩_∩）O haha）です。例えば、Xiaomi Mallの一部レイアウトは以下の通りです。

Eコマースのプラットフォームによっては、基本的に同じレイアウトになっているものがあり、その代表的なものがこの9ボックスレイアウトであることは容易にご理解いただけると思います。もちろん、CSSで個別に配置することも可能ですが、データ量が少ない場合はともかく、データ量が多い場合は計算が面倒ですし、レイアウトに影響を与える可能性もあります。では、9ボックスレイアウトの仕組みについて説明します。

原理（初心者にわかりやすいように）

上の画像は9ボックス図ですが、今度はWebページに置き換えてイメージしてみましょう（イメージできない人は上の画像を見てね～～）一番外側の大きな緑のdivタグでレイアウトを包み、その中に緑のdivタグのサブレベル要素として小さな青のdivタグがたくさんあるので、単純なネストをしています。対象要素が小さな青いdivなので、必然的にボックスのサイズや、外側のマージンなどを設定する必要があります。しかし、操作する対象はボックスサイズ＋マージン（つまり、上の画像の赤枠の部分）です。

手順は以下の通りです。

まず、上の赤いボックスのサイズを200px * 200pxと仮定して、青いボックスとその周囲全体のサイズを取得します。

これらのボックスには、絶対配置と相対配置があります。緑のボックスは相対配置で、中の青いボックスは絶対配置です（つまり、子が親になります） 理解できない場合は、次のサイトを参照してください。 CSSによる子の位置決め-親の絶対位置決め

上の9つのボックスを[3][3]の2次元配列に入れることを想像してみましょう。このとき、最初のボックスは配列の [0][0] の位置にあり、緑の div 内の位置は (0×200px, 0×200px)、つまり top = 0px, left = 0px となります; 二次元配列の右ボックスは [0][1] (0×200px, 1×200px) つまり つまり、top = 0px;, left = 200px; その下のボックスの2次元配列での位置は [1][0] (1×200px, 0×200px) つまり top = 200px, left = 0px となり、全てのサブレベル要素の位置が得られます。

コードの実装

まずは結果のスクリーンショットをご覧ください

上のボタンをクリックすると、異なるカラムを表示することができます。
以下はJSのコードです。

window.onload = function () {
// Implement the nine-box grid
    var btns = $('.btnall button');// get all the buttons
    var photos = $('.photoall div.photo');// get all the subblocks
    //implement the nine-box specific method with references, allcols represents the number of columns wanted.
    function Event(allcols){
        // the width and length of the box and the outer margin
        var w = 250, h = 390, margin = 10;
        for(var i = 0; i < photos.length; i++){
        	// the core of the method
            var row = parseInt(i / allcols);
            var col = parseInt(i % allcols);
            // the specific position of the run
            var top = row * (h + margin) + 'px';
            var left = col * (w + margin) + 'px';
            // Set the position
            photos[i].style.position = 'absolute';
            photos[i].style.left = left;
            photos[i].style.top = top;
        }
    }
    // Set the events for each button to be listened to
    btns[0].onclick = function (){
      	Event(3);
    };
    btns[1].onclick = function (){
        Event(4);
    };
    btns[2].onclick = function (){
        Event(5);
    };
}

今回の記事は、9ボックスグリッドの原理を使ったHTMLレイアウトについてですが、もっと関連するHTML 9ボックスグリッドレイアウトの内容は、スクリプトハウスの過去記事を検索するか、以下の関連記事を引き続きご覧ください、今後ともスクリプトハウスをよろしくお願いします!