大家在刷xx等短视频平台，发现都是这样的瀑布流布局
云哥一行代码直接实现瀑布流，很多前端都不会做。
云哥教大家通过砌体布局一行代码： columns: 300px auto; 就能实现瀑布流。
简直逆天，我估计很多前端都没有听过什么叫砌体布局，css里面的。
大家看一下我用砌体布局写的瀑布屏，一行代码搞定，这个图片都是不定宽高特别难，实现的你看自适应，效果贼好。
一栏两栏三栏四栏，你不管有多少，它就自适应自填充。贼牛。
前端代码就是这样很简单，就是一个大框里面套图片，核心代码就这一行。 columns: 300px auto; 这个是砌体布局，剩下就是一些样式之类的直接就搞定了，我天哪。
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>瀑布流布局示例</title>
<style>
.container {
columns: 300px auto;
column-gap: 15px;
padding: 15px;
}
.item {
break-inside: avoid;
margin-bottom: 15px;
}
.item img {
width: 100%;
border-radius: 8px;
display: block;
}
</style>
</head>
<body>
<div class="container">
<div class="item">
<img src="https://picsum.photos/320/320" alt="随机图片">
</div>
<div class="item">
<img src="https://picsum.photos/360/300" alt="随机图片">
</div>
<div class="item">
<img src="https://picsum.photos/210/200" alt="随机图片">
</div>
<div class="item">
<img src="https://picsum.photos/330/350" alt="随机图片">
</div>
<div class="item">
<img src="https://picsum.photos/340/350" alt="随机图片">
</div>
<div class="item">
<img src="https://picsum.photos/210/280" alt="随机图片">
</div>
<div class="item">
<img src="https://picsum.photos/210/320" alt="随机图片">
</div>
<div class="item">
<img src="https://picsum.photos/180/320" alt="随机图片">
</div>
<div class="item">
<img src="https://picsum.photos/280/360" alt="随机图片">
</div>
<div class="item">
<img src="https://picsum.photos/250/280" alt="随机图片">
</div>
<div class="item">
<img src="https://picsum.photos/290/360" alt="随机图片">
</div>
<div class="item">
<img src="https://picsum.photos/300/220" alt="随机图片">
</div>
<div class="item">
<img src="https://picsum.photos/390/340" alt="随机图片">
</div>
<div class="item">
<img src="https://picsum.photos/200/390" alt="随机图片">
</div>
<div class="item">
<img src="https://picsum.photos/390/440" alt="随机图片">
</div>
<div class="item">
<img src="https://picsum.photos/430/310" alt="随机图片">
</div>
<div class="item">
<img src="https://picsum.photos/190/370" alt="随机图片">
</div>
<div class="item">
<img src="https://picsum.photos/290/330" alt="随机图片">
</div>
<div class="item">
<img src="https://picsum.photos/250/410" alt="随机图片">
</div>
<div class="item">
<img src="https://picsum.photos/230/380" alt="随机图片">
</div>
<div class="item">
<img src="https://picsum.photos/260/370" alt="随机图片">
</div>
<div class="item">
<img src="https://picsum.photos/210/430" alt="随机图片">
</div>
<div class="item">
<img src="https://picsum.photos/290/310" alt="随机图片">
</div>
<div class="item">
<img src="https://picsum.photos/430/290" alt="随机图片">
</div>
</div>
</body>
</html>
瀑布流其实是非常难做的，特别是图片不定宽高的，真的很多人用flex，grid做太难了。
这一行代码直接搞定了，大家学到了吧。
如果你需要前端一对一简历面试辅导，前端私教课，项目难点笔记、语音咨询，模拟面试，可以找 云哥