共计 4302 个字符，预计需要花费 11 分钟才能阅读完成。
1. 瀑布流布局
<!DOCTYPE html>
<html lang="en">
<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">
<title> 瀑布流布局 </title>
<style>
.waterfall {
width: 300px;
column-count: 2;
}
.item {flex:none;}
.item img{width: 100%;}
</style>
</head>
<body>
<ul class="waterfall">
<li class="item">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.17moban.com%2Fuploads%2Fallimg%2F141213%2F1-1412132205410-L.jpg&refer=http%3A%2F%2Fwww.17moban.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622164359&t=2d33fbaa87a7581aff2a97ecfb77b91e" alt="">
</li>
<li class="item">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.17moban.com%2Fuploads%2Fallimg%2F141213%2F1-1412132205410-L.jpg&refer=http%3A%2F%2Fwww.17moban.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622164359&t=2d33fbaa87a7581aff2a97ecfb77b91e" alt="">
</li>
<li class="item">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimages2017.cnblogs.com%2Fblog%2F918206%2F201709%2F918206-20170905104716241-1509851927.png&refer=http%3A%2F%2Fimages2017.cnblogs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622164359&t=ca84c4b20e0ad2a8e16c60489f032e83" alt="">
</li>
<li class="item">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp6.zbjimg.com%2Fservice%2F2016-05%2F26%2Fservice%2F5746e4ad9cef5.jpg&refer=http%3A%2F%2Fp6.zbjimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622164342&t=a4079c42596491178b648289f2a443b6" alt="">
</li>
<li class="item">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp6.zbjimg.com%2Fservice%2F2016-05%2F26%2Fservice%2F5746e4ad9cef5.jpg&refer=http%3A%2F%2Fp6.zbjimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622164342&t=a4079c42596491178b648289f2a443b6" alt="">
</li>
<li class="item">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.17moban.com%2Fuploads%2Fallimg%2F141213%2F1-1412132205410-L.jpg&refer=http%3A%2F%2Fwww.17moban.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622164359&t=2d33fbaa87a7581aff2a97ecfb77b91e" alt="">
</li>
<li class="item">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp6.zbjimg.com%2Fservice%2F2016-05%2F26%2Fservice%2F5746e4ad9cef5.jpg&refer=http%3A%2F%2Fp6.zbjimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622164342&t=a4079c42596491178b648289f2a443b6" alt="">
</li>
<li class="item">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimages2017.cnblogs.com%2Fblog%2F918206%2F201709%2F918206-20170905104716241-1509851927.png&refer=http%3A%2F%2Fimages2017.cnblogs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622164359&t=ca84c4b20e0ad2a8e16c60489f032e83" alt="">
</li>
<li class="item">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.17moban.com%2Fuploads%2Fallimg%2F141213%2F1-1412132205410-L.jpg&refer=http%3A%2F%2Fwww.17moban.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622164359&t=2d33fbaa87a7581aff2a97ecfb77b91e" alt="">
</li>
<li class="item">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp6.zbjimg.com%2Fservice%2F2016-05%2F26%2Fservice%2F5746e4ad9cef5.jpg&refer=http%3A%2F%2Fp6.zbjimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622164342&t=a4079c42596491178b648289f2a443b6" alt="">
</li>
<li class="item">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.17moban.com%2Fuploads%2Fallimg%2F141213%2F1-1412132205410-L.jpg&refer=http%3A%2F%2Fwww.17moban.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622164359&t=2d33fbaa87a7581aff2a97ecfb77b91e" alt="">
</li>
<li class="item">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp6.zbjimg.com%2Fservice%2F2016-05%2F26%2Fservice%2F5746e4ad9cef5.jpg&refer=http%3A%2F%2Fp6.zbjimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622164342&t=a4079c42596491178b648289f2a443b6" alt="">
</li>
<li class="item">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimages2017.cnblogs.com%2Fblog%2F918206%2F201709%2F918206-20170905104716241-1509851927.png&refer=http%3A%2F%2Fimages2017.cnblogs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622164359&t=ca84c4b20e0ad2a8e16c60489f032e83" alt="">
</li>
</ul>
</body>
</html>2. 解决 column-count 引起的内容割裂 bug
容器内加上款式
break-inside: avoid;
正文完
