HTML运用9宫格基本原理开展网页页面合理布局

序言

说到9宫格是否想起了9宫格火锅那（O(∩_∩)O哈哈~）。实际上9宫格合理布局在各大网站基础都有运用，自然这里的9宫格是泛指（O(∩_∩)O哈哈）。例如小米商城部分合理布局以下：

不难发现，1些电子商务服务平台的合理布局基础上大同市小异，最广泛的還是这类9宫格合理布局。自然根据CSS还可以对其独立设定精准定位，可是数据信息量小还好说，假如数据信息量多起来，测算不便不说，也有将会危害合理布局。下面大家来讲1下9宫格合理布局的基本原理。

基本原理（小白也能看懂）

上图是1个9宫格示用意，如今大家把它想像到1个网页页面中（想像不到就看上图照片~~），在网页页面中这个合理布局由最外层翠绿色的大的div标识包裹,在翠绿色的div标识中有很多蓝色的小的div标识做为翠绿色div标识的子级元素构成，这样简易的嵌套循环就进行了。因为大家的总体目标元素是蓝色的小div，那末大家没法防止的要对其设定盒子尺寸，和外边距这些。可是大家实际操作的目标便是盒子的尺寸+外边距（也便是上图中鲜红色框选的地区）。
 

实际步骤以下：

大家先获得到蓝盒子和其周边总体的尺寸，假定上图红框的尺寸是200px * 200px

这些盒子就要牵扯到肯定精准定位和相对性精准定位：翠绿色的盒子是相对性精准定位，里边的蓝盒子是肯定精准定位（即子绝父相）假如不搞清楚那末请浏览CSS精准定位子绝父相

大家想像把上面的9宫格放进 [3][3] 的2维数字能量数组中。此时第1个方框坐落于数字能量数组的 [0] [0] 部位，他的部位在翠绿色的div中便是（0×200px，0×200px），即top = 0px，left = 0px；其右面方框在2维数字能量数组的部位是 [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 () {
//    完成9宫格
    var btns  = $('.btnall button');//获得全部的按钮
    var photos = $('.photoall div.photo');//获得全部的子块
    //完成9宫格实际带参方式，allcols意味着要想的列数。
    function Event(allcols){
        //盒子的宽长和外边距
        var w = 250, h = 390, margin = 10;
        for(var i = 0; i < photos.length; i++){
        	//方式的关键
            var row = parseInt(i / allcols);
            var col = parseInt(i % allcols);
            //实际部位的运作
            var top = row * (h + margin) + 'px';
            var left = col * (w + margin) + 'px';
            //设定部位
            photos[i].style.position = 'absolute';
            photos[i].style.left = left;
            photos[i].style.top = top;
        }
    }
    //为各个按钮设定监视恶性事件
    btns[0].onclick = function (){
      	Event(3);
    };
    btns[1].onclick = function (){
        Event(4);
    };
    btns[2].onclick = function (){
        Event(5);
    };
}

到此这篇有关HTML运用9宫格基本原理开展网页页面合理布局的文章内容就详细介绍到这了,更多有关HTML9宫格合理布局內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容，期待大伙儿之后多多适用脚本制作之家！