「前端页面布局」----图片瀑布流_前端图片动态布局

前几天在一家公司机试，做一个瀑布流的前端页面。感觉不是很难，所以回来自己敲了一次。

效果图：

思路：
1、使用绝对布局：position:absolute;
2、动态赋予每一张图片的top值和left值。

代码：

<!-- html部分 图片和标题部分省略，可自行添加图片和标题 -->
<div class = 'box>
	<ul id='box_list'>
		<li>
			<img src='**.png'>
			<div class='title'>***</div>
		</li>
		<li>
			<img src='**.png'>
			<div class='title'>***</div>
		</li>
		<li>
			<img src='**.png'>
			<div class='title'>***</div>
		</li>
	</ul>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

/*css部分*/
ul{margin:0; padding:0;}
li{	position:absolite; list-style:none; border:10px solid silver;}
.box{width:100%; height:100%}
.title{text-align:center}
/*我的图片素材是宽是210px、高是自定义，所以图片的长宽就不设置了*/
/*.box img{width:210px;height:max-content}*/
1
2
3
4
5
6
7

//javascript部分
window.onload = function(){
	setPosition(4);
};
function setPosition(n){
	//n为第一行图片有多少张
	var li = doucument.querySelectorAll("#box_list li")
	var arr = [],margin = 10, minHeight;
	for(var i in li){
		var li_height = li[i].offsetHeight;//获取每一个li的高度
		if(i<n){
			//第一行的li的top为0；
			//每一个li的宽度都是210+20；所以第一行的li = 上一个li的宽度 + margin
			li[i].style.top = 0;
			li[i].style.left = (230 + margin) * i + 'px';
			arr.push(li_height);//把第一行的li的高度都传入arr数组中
		}else{
			//将arr数组中的最小值赋值给minHeight
			minHeight = Math.min.apply(null,arr);
			 //第一行以下的li的top和left赋值
		 	for(var j in arr){
			 	if(arr[j] == minHeight){
			 		li[i].style.top = arr[j] + 'px';
			 		li[i].style.left = (230 + margin) * j + 'px';
			 		arr[j] += (li_height + margin) 	
		 	 	}
		 	}
		}
	}
}
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

唠嗑一下，最近面试有点迷，投了简历也没多少家公司约面试。有些公司打了电话进来，叭叭叭问了一大堆情况，然后又没了消息。这届应届毕业生是真的难啊。还要加油加油！！