<!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">
<title>瀑布流</title>
<style>
*{
margin: 0;
padding: 0;
}
body,html{
width: 100%;
}
ul{
width: 100%;
list-style: none;
}
li{
float: left;
margin-left: 2px;
margin-right: 2px;
/* height: 100px; */
/* width:1px; */
}
.cliear::after{
content: "";
display: block;
height: 0;
visibility: hidden;
overflow: hidden;
clear: both;
}
</style>
</head>
<body>
<ul class="cliear"></ul>
<script>
const COL = 6;
var ul,lis=[],heightList=[],n=2;
init()
function init(){
ul=document.querySelector("ul");
for(var i=0;i<COL;i++){
//创建一个li,
var li = document.createElement("li");
//给创建的li赋值宽度
li.style.width=`calc( ${100/COL}% - 4px )`;
//将li添加到ul中
ul.appendChild(li);
//将创建的每一个li放进数组中,这样这个数组就拿到了所有的li集合
lis.push(li);
//刚开始是没有高度的,初始值每一个都是0
heightList.push(0);
}
loadImag();
}
function loadImag(){
//创建img标签
var img = new Image();
//将img标签的src赋值
img.src=`./img/${n}-.jpg`;
//添加加载事件(预加载);
img.addEventListener("load",loadHander);
}
//缓存图片完毕后
function loadHander(e){
//先清除该事件
this.removeEventListener("load",loadHander);
//设置图片的宽度为li宽度的100%;
this.style.width = "100%";
//查找heightList数组中最小的那个值
var min = Math.min(...heightList);
//取出最小值的那个下标
var minIndex = heightList.indexOf(min);
//添加img标签到最小值处
lis[minIndex].appendChild(this);
// 然后将该图片的高度存到heightList相应的下标中
heightList[minIndex]+=this.offsetHeight;
//更新n;
n++;
if(n>79){
return;
}
loadImag();
}
</script>
</body>
</html>
效果图如下图所示: