HTML利用九宫格原理进行网页布局

说到九宫格是不是想到了九宫格暖锅那（O(∩_∩)O哈哈~）。着实九宫格机关在各大网站根基都有应用，虽然这里的九宫格是泛指（O(∩_∩)O哈哈）。好比小米商城局部机关如下：

不难发明，一些电商平台的机关根基上大同小异，最广泛的照旧这种九宫格机关。虽然通过CSS也可以对其单独配置定位，可是数据量小还好说，假如数据量多起来，计较贫困不说，尚有也许影响机关。下面我们来说一下九宫格机关的道理。

道理（小白也能看懂）

上图是一个九宫格表示图，此刻我们把它想象到一个网页中（想象不到就看上图图片~~），在网页中这个机关由最外层绿色的大的div标签包裹,在绿色的div标签中有很多蓝色的小的div标签作为绿色div标签的子级元素构成，这样简朴的嵌套就完成了。因为我们的方针元素是蓝色的小div，那么我们无可停止的要对其配置盒子巨细，以及外边距等等。可是我们操纵的工具就是盒子的巨细+外边距（也就是上图中赤色框选的地区）。
 

详细流程如下：

我们先获取到蓝盒子以及其周围整体的巨细，假设上图红框的巨细是200px * 200px

这些盒子就要扳连到绝对定位和相对定位：绿色的盒子是相对定位，内里的蓝盒子是绝对定位（即子绝父相）假如不大白那么请会见CSS定位子绝父相

我们想象把上面的九宫格放进 [3][3] 的二维数组中。此时第一个方框位于数组的 [0] [0] 位置，他的位置在绿色的div中就是（0×200px，0×200px），即top = 0px，left = 0px；其右面方框在二维数组的位置是 [0][1]（0×200px，1×200px）即top = 0px;，left = 200px；其下面方框在二维数组的位置是 [1][0]（1×200px，0×200px）即top = 200px，left = 0px。以此类推就可以都获得全部子级元素的位置了。

代码实现

先看结果截图
 

在我点击上方按钮时可以实现差异列数的揭示。
以下是JS代码

window.onload = function () { // 实现九宫格 var btns = $('.btnall button');//获取全部的按钮 var photos = $('.photoall div.photo');//获取全部的子块 //实现九宫格详细带参要领，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操作九宫格道理举办网页机关的文章就先容到这了,更多相干HTML九宫格机关内容请搜刮剧本之家早年的文章或继承赏识下面的相干文章，但愿各人往后多多支持剧本之家！

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!