为什么要这么“作死”
本文使用JS方法，对之前本来比较简单的九宫格布局方法，进行了“暴力”重构
代码主要的构思
1.毋庸置疑，第一步，在meta中设定显示宽度为设备的宽度，缩放比例为1:1。
2.要想实现页面的高为100%,因页面存在继承属性，html继承了浏览器的高度，因此需要在设置盒子的高度为100%之前，设置html和body的高度为100%，才能实现子盒子的高度为100%。
3.最开始我的考虑是实现宽高为100%，然后子盒子再继续以百分比进行设置，虽然实现了九宫格，但是页面实在是太吃藕了，所以思考着添加JS方法，对页面进行重构。
使用JS方法的重构思路
1.获取浏览器的宽度
2.比较大盒子的宽高，并取出宽高中较小的值，并将较小值赋值给大盒子的宽和高，这就实现了大盒子是个正方形且刚刚好接近覆盖整个页面。
3.此时的页面靠左，因此需考虑一个办法将页面居中，这里面再次使用了“暴力”方法进行了居中，居中方式如下：
1
| con.style.marginLeft=cWidth/2-con.offsetWidth/2+'px';
|
即是将浏览器宽度减去大盒子宽度除二，便是左边的margin的宽度啦。
4.对小盒子进行设置，小盒子的宽高是相对大盒子的，这就比较好设置了，进行遍历，设置它们的宽高相等就好啦。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
| <!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Nine-Block Layout</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style>
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
}
.container{
height:100%;
width: 100%;
}
.box{
height:29%;
width: 29%;
background:
float:left;
margin:2%;
border-radius: 10px;
}
</style>
<script>
window.onload=function(){
var con=document.getElementsByClassName('container')[0]; //获取容器
var box=document.getElementsByClassName('box'); //获取小盒子
//console.log(con.offsetHeight>con.offsetWidth);
var cWidth=document.body.clientWidth; //设置cWidth值为屏幕宽度
//console.log(cWidth)
function compare(){ //比较大盒子宽高大小，取小值
if (con.offsetHeight>con.offsetWidth) {
return con.offsetWidth;
} else {
return con.offsetHeight;
}}
con.style.height=con.style.width=compare()+'px'; //将大盒子的宽高设置为较小值
con.style.marginLeft=cWidth/2-con.offsetWidth/2+'px'; //将坐外边距设置为屏幕宽减去大盒子宽度的一半
//console.log(con.style.width);
//console.log(con.style.height);
for (var i = 0; i < box.length; i++) { //将小盒子的宽高设为相等
box[i].style.width=box[0].offsetHeight+'px';
}
}
</script>
</head>
<body>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
|
