css3 怎么实现瀑布流布局？css瀑布流布局实现方法。

//css部分
<style type="text/css">
ul,li{ list-style: none; }
.list{ 
	column-count:3; /* 控制总列数 */  
	column-gap: 2em; /* 控制列左右间距 */
}
.list li{ margin-bottom:2rem; break-inside:avoid; /* 控制文本块分解成单独的列，以免项目列表的内容跨列切断，破坏整体的布局。 */}
.list li:nth-child(1){ background-color: #f60; height: 220px; }
.list li:nth-child(2){ background-color: #09c; height: 220px; }
.list li:nth-child(3){ background-color: #666; height: 330px; }
.list li:nth-child(4){ background-color: #28d; height: 270px; }
.list li:nth-child(5){ background-color: #02c; height: 360px; }
.list li:nth-child(6){ background-color: #f00; height: 220px; }
.list li:nth-child(7){ background-color: #ddd; height: 290px; }
.list li:nth-child(8){ background-color: #f60; height: 260px; }
.list li:nth-child(9){ background-color: #09c; height: 220px; }
.list li:nth-child(10){ background-color: #666; height: 330px; }
</style>

//html部分
<ul class="list">
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>