css瀑布流

效果如下：

 

 

代码：

<style>
.nav {
    column-count: 3;
    column-gap: 0;
}
.item {
    box-sizing: border-box;
    break-inside: avoid;
    padding: 10px;
}
</style>

　　html:

<div class="nav">
                <div class="item">
                <img src="https://picsum.photos/360/260?random=1">
                </div>
                <div class="item">
                <img src="https://picsum.photos/360/320?random=2">
                </div>
                <div class="item">
                <img src="https://picsum.photos/360/320?random=16">
                </div>
                <div class="item">
                <img src="https://picsum.photos/360/420?random=3">
                </div>
                <div class="item">
                <img src="https://picsum.photos/360/420?random=4">
                </div>
                <div class="item">
                <img src="https://picsum.photos/360/480?random=5">
                </div>
                <div class="item">
                <img src="https://picsum.photos/360/500?random=16">
                </div>
                <div class="item">
                <img src="https://picsum.photos/360/500?random=7">
                </div>
                <div class="item">
                <img src="https://picsum.photos/360/400?random=8">
                </div>
                <div class="item">
                <img src="https://picsum.photos/360/440?random=9">
                </div>
                <div class="item">
                <img src="https://picsum.photos/360/420?random=10">
                </div>
                <div class="item">
                <img src="https://picsum.photos/360/500?random=11">
                </div>
                <div class="item">
                <img src="https://picsum.photos/360/460?random=12">
                </div>
                <div class="item">
                <img src="https://picsum.photos/360/480?random=13">
                </div>
                <div class="item">
                <img src="https://picsum.photos/360/440?random=14">
                </div>
                <div class="item">
                <img src="https://picsum.photos/360/420?random=15">
                </div>
        </div>

　　

 

第二种flex

代码