导语：
各个公司在面试前端开发的时候经常会问到一个问题，那就是瀑布流布局，今天教你一招，一分钟学完瀑布流布局。
一，什么是瀑布流布局，具体呈现出来是什么样子？
效果如下图，怎么实现？这里介绍两种方式（css和js）
1，css实现瀑布流布局
实现效果
代码如下
最外面是一个flex的盒子box，flex-direction设为row，横向排列，里面的有2个子盒子itembox都是flex盒子并且是flex-direction设为coloum，子盒子里面放item。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
.box {
display: flex;
flex-direction: row;
}
.itembox{
display: flex;
flex-direction: column ;
}
.item {
margin: 10px;
}
.item img{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="box">
<div class="itembox">
<div class="item">
<img src="./4.jpg" alt="" />
<div class="bottom">
<p class="name">爱你一万年</p>
<p class="hot">播放量：1872</p>
</div>
</div>
<div class="item">
<img src="./6.jpeg" alt="" />
<div class="bottom">
<p class="name">爱你一万年</p>
<p class="hot">播放量：1872</p>
</div>
</div>
<div class="item">
<img src="./5.jpg" alt="" />
<div class="bottom">
<p class="name">爱你一万年</p>
<p class="hot">播放量：1872</p>
</div>
</div>
<div class="item">
<img src="./7.jpeg" alt="" />
<div class="bottom">
<p class="name">爱你一万年</p>
<p class="hot">播放量：1872</p>
</div>
</div>
</div>
<div class="itembox">
<div class="item">
<img src="./6.jpeg" alt="" />
<div class="bottom">
<p class="name">爱你一万年</p>
<p class="hot">播放量：1872</p>
</div>
</div>
<div class="item">
<img src="./4.jpg" alt="" />
<div class="bottom">
<p class="name">爱你一万年</p>
<p class="hot">播放量：1872</p>
</div>
</div>
<div class="item">
<img src="./7.jpeg" alt="" />
<div class="bottom">
<p class="name">爱你一万年</p>
<p class="hot">播放量：1872</p>
</div>
</div>
</div>
</div>
</body>
</html>
2，js实现瀑布流布局
效果一样，直接上代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
.box {
position:relative;
}
.item {
position: absolute;
}
.item img{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="box">
<div class="item">
<img src="./4.jpg" alt="" />
<div class="bottom">
<p class="name">爱你一万年</p>
<p class="hot">播放量：1872</p>
</div>
</div>
<div class="item">
<img src="./6.jpeg" alt="" />
<div class="bottom">
<p class="name">爱你一万年</p>
<p class="hot">播放量：1872</p>
</div>
</div>
<div class="item">
<img src="./5.jpg" alt="" />
<div class="bottom">
<p class="name">爱你一万年</p>
<p class="hot">播放量：1872</p>
</div>
</div>
<div class="item">
<img src="./7.jpeg" alt="" />
<div class="bottom">
<p class="name">爱你一万年</p>
<p class="hot">播放量：1872</p>
</div>
</div>
<div class="item">
<img src="./3.jpg" alt="" />
<div class="bottom">
<p class="name">爱你一万年</p>
<p class="hot">播放量：1872</p>
</div>
</div>
<div class="item">
<img src="./6.jpeg" alt="" />
<div class="bottom">
<p class="name">爱你一万年</p>
<p class="hot">播放量：1872</p>
</div>
</div>
<div class="item">
<img src="./4.jpg" alt="" />
<div class="bottom">
<p class="name">爱你一万年</p>
<p class="hot">播放量：1872</p>
</div>
</div>
</div>
</body>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
function getClient() {
return {
width: window.innerWidth,
height: window.innerHeight
}
}
function picFall(col) {
let bodyWidth = getClient().width //获取body的宽度
let itemWidth = parseInt(bodyWidth/col) - 10 //得到item的宽度
let arr = [] //用来存放2列的高度
$(".item").width(itemWidth) //设置到item的宽度
let picnum = $(".box .item").length
for (let i = 0; i < picnum; i++) {
var height = $(".box .item").eq(i).find("img").height() + $(".box .item").eq(i).find(".bottom").height() //计算当前图片的高度
if (i < col) {
$(".box .item").eq(i).css({
top: 0,
left: (itemWidth) * i + 10 * i + 5
})
arr.push(height)
} else {
let minHeight = arr[0] < arr[1] ? arr[0] : arr[1] // 找到2个数中最小高度和它的下标
let index = arr[0] < arr[1] ? 0 : 1
// 将下一个图片加在两列中高度最小的一列
$(".box .item").eq(i).css({
top: arr[index] + 20, //设置上下两个item 20的距离
left: $(".box .item").eq(index).css("left")
})
// 最小高度列的高度 = 当前自己的高度 + 增加的高度
arr[index] = arr[index] + height +20 //设置上下两个item 20的距离
}
}
}
// 页面初始化
window.onload = function(){
picFall(2) //只支持两列哦
}
</script>
</html>
学废了吗？希望老铁们挥挥小手点个赞，给更多人学废瀑布流布局。