[JavaScript知识库]前端学习----瀑布流

上代码

   html部分
<div class="content">
		<div>
			<img src="imgs/t01.jpeg">
		</div>
		<div>
			<img src="imgs/t02.jpeg">
		</div>
		...
</div>
css部分
.content{
	width: 1200px;
	margin: 0 auto;
}
.content>div{
	float: left;
	border: 1px solid rgb(66, 65, 65);
	padding: 10px;
}
.content>div>img{
	width: 250px;//注意这里height不能设置
}
js部分
<script>
	window.onload = function () {
		//1.获取主容器的宽度
		var content = document.getElementsByClassName("content")[0]
		var contentWidth = content.offsetWidth

		//2.获取单个图片高度
		var imgs = content.children
		var imgsWidth = imgs[0].offsetWidth

		//3.第一行可以排列多少张照片
		var nums = Math.floor(contentWidth / imgsWidth)
		console.log(nums);

		//4.收集第一排的所在高度
		var arrHeight = []
		for (var i = 0; i < imgs.length; i++) {
			if (i < nums) {//这里是第一行
				arrHeight.push(imgs[i].offsetHeight)//记录第一行图片的高度
			} else {//在第一行找到最小的高度，把后面的插进去
				var obj = {
					minH: arrHeight[0],//先把第一张设置最小
					minI: 0
				}
				for (var j = 0; j < arrHeight.length; j++) {
					if (arrHeight[j] < obj.minH) {
						obj.minH = arrHeight[j],//找到真正最小的
							obj.minI = j
					}
				}
				imgs[i].style.position = "absolute"//把后一张接在第一行高度最小的
				//记得加px
				imgs[i].style.left = imgs[obj.minI].offsetLeft + 'px'
				imgs[i].style.top = obj.minH + 'px'
				arrHeight[obj.minI] = arrHeight[obj.minI] + imgs[i].offsetHeight//高度更新
			}
		}
	}
</script>

?主要思想：

将图片高度设置成一个空数组，将图片插入到空数组中，数组长度自己定义。

遍历imgs数组找出这一行最小盒子高度，将下一张设置定位拖到最小高度的下面

重新设置该最小高度图片和高度