<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>
注意:
当前只支持火狐浏览器,并且需要打开这个配置