CSS_瀑布流实现二，grid-template-rows

<style>
	.container{
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-gap: 10px;
		grid-template-rows: masonry;
	}
	img{
		width: 100%;
		display: block;
	}
</style>
<div class="container">
	<img src="https://web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg" style="height: 100px;" alt="">
	<img src="https://web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg" style="height: 200px;" alt="">
	<img src="https://web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg" style="height: 110px;" alt="">
	<img src="https://web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg" style="height: 120px;" alt="">
	<img src="https://web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg" style="height: 130px;" alt="">
	<img src="https://web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg" style="height: 140px;" alt="">
	<img src="https://web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg" style="height: 150px;" alt="">
	<img src="https://web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg" style="height: 120px;" alt="">
	<img src="https://web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg" style="height: 160px;" alt="">
	<img src="https://web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg" style="height: 190px;" alt="">
</div>

注意：
当前只支持火狐浏览器，并且需要打开这个配置