-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.html
108 lines (98 loc) · 4.85 KB
/
main.html
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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="styleSheet" href="css/main.css"/>
<meta name="description" content="">
<meta name="keywords" content="">
<title>Autumn Images</title>
</head>
<body>
<!-- 快捷导航shortcut -->
<div class="shortcut">
<div class="wrapper">
<ul>
<li><a href="login.html">Please Login</a></li>
<li><a href="login.html">Please Login</a></li>
<li><a href="login.html">Please Login</a></li>
<li><a href="login.html">Please Login</a></li>
<li><a href="login.html">Please Login</a></li>
<li><a href="login.html">Please Login</a></li>
<li><a href="login.html"><span></span>Please Login</a></li>
</ul>
</div>
</div>
<img src="img/moon.png" width="575" height="594" style="position: absolute; left: 0; top: 52px" alt=""/>
<img src="img/moon.png" width="575" height="594" style="position: absolute; left: 0; top: 646px" alt=""/>
<img src="img/moon.png" width="575" height="594" style="position: absolute; left: 0; top: 1240px" alt=""/>
<img src="img/moon.png" width="575" height="594" style="position: absolute; left: 0; top: 1834px" alt=""/>
<img src="img/moon.png" width="575" height="594" style="position: absolute; left: 0; top: 2428px" alt=""/>
<div id="container">
<script>
let data = []
for (let i = 0; i < 31; i++) {
let s = "./img/" + i + ".jpg"
document.write(`
<div class="box">
<div class="box-img">
<a href="SVGs/test`+ i + `.html" target="_blank" title=`+ s + `>
<img src=`+ s + ` alt="">
</a>
</div> v
</div>
`)
}
</script>
</div>
<script>
window.onload = function () {
img_location('container', 'box')
}
// 获取到当前有多少张图片要摆放
function img_location(parent, content) {
// 将container下所有的内容全部取出
let c_parent = document.getElementById(parent) //获取container盒子的标签
let c_content = get_child_element(c_parent, content);//图片时放在container盒子里的box盒子里的，因此我们还需要定义一个函数get_child_element（）获取出box里的图片
let num = 3
// let imgWidth = c_content[0].offsetWidth;//获取css中我们给每张图片设置的固定宽度
// c_parent.style.cssText = `width: ${imgWidth * num} px`
//摆放图片
let BoxHeightArr = []
for (let i = 0; i < c_content.length; i++) {
if (i < num) { //我们先将第一行摆满
BoxHeightArr[i] = c_content[i].offsetHeight //这里我们通过BoxHeightArr[]数组存放每列的高度
} else { //剩下的图片我们依次次优先选择摆在高度最低的一列后面
let minHeight = Math.min.apply(null, BoxHeightArr); //通过将Math.min()中求最小值的方法应用到数组中，求出高度最低的列
let minIndex = getMinHeightLocation(BoxHeightArr, minHeight); //确定了高度最低的列后我们就差求出列的位置了,我们通过编写一个函数实现
//最后将我们的图片相对于container盒子进行定位放在每一列下就可以啦
c_content[i].style.position = 'absolute'
c_content[i].style.top = minHeight + 'px'
c_content[i].style.left = c_content[minIndex].offsetLeft + 'px'
//最后不忘记跟新每一列的高度哦
BoxHeightArr[minIndex] = BoxHeightArr[minIndex] + c_content[i].offsetHeight
}
}
// console.log(BoxHeightArr);
}
function get_child_element(parent, content) {
const contentArr = []
const allContent = parent.getElementsByTagName('*')//通过内置函数getElementsByTagName()将container中的所有元素取出来
// console.log(allContent);
//但是container中所有的元素中我们只需要的是所有的img，为此我们写个for循环将所用img筛选出来存放在一个数组中
for (let i = 0; i < allContent.length; i++)
if (allContent[i].className === content)
contentArr.push(allContent[i])
// console.log(contentArr);
return contentArr
}
//获取列最高度最小列的位置下标函数
function getMinHeightLocation(BoxHeightArr, minHeight) {
for (let i in BoxHeightArr)
if (BoxHeightArr[i] === minHeight)
return i
}
</script>
</body>
</html>