用多列布局实现瀑布流效果

多列布局一些其他设置

column-count // 列数
column-gap // 列间距
break-inside // 列或区块发生中断时候的表现
/**更多属性查看其他文档*/
column-rule-style // 样式 solid
column-rule-width // 宽度
column-rule-color // 颜色
column-rule // 列边框
column-span
column-width

显示效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8eRvWtA7-1687168188734)(https://s1.ax1x.com/2023/05/25/p9H2m4A.png)]

CSS代码

.box {
/* 设置 5 列显示 */
column-count: 5;
}

.box>div {
width: 300px;
border: 3px solid green;
padding: 10px;
margin-bottom: 10px;


/* 设置不折行显示 */
break-inside: avoid;
}

.box>div>img {
width: 100%;
}

html 结构

<div class="box">
        <div>
            <img src="img/1.jpg" alt="">
            <p>图片</p>
        </div>
        <div>
            <img src="img/2.jpg" alt="">
            <p>图片</p>
        </div>
        <div>
            <img src="img/3.jpg" alt="">
            <p>图片</p>
        </div>
        <div>
            <img src="img/4.jpg" alt="">
            <p>图片</p>
        </div>
        <div>
            <img src="img/5.jpg" alt="">
            <p>图片</p>
        </div>
        <div>
            <img src="img/6.jpg" alt="">
            <p>图片</p>
        </div>
        <div>
            <img src="img/7.jpg" alt="">
            <p>图片</p>
        </div>
        <div>
            <img src="img/8.jpg" alt="">
            <p>图片</p>
        </div>
        <div>
            <img src="img/9.jpg" alt="">
            <p>图片</p>
        </div>
        <div>
            <img src="img/10.jpg" alt="">
            <p>图片</p>
        </div>
        <div>
            <img src="img/11.jpg" alt="">
            <p>图片</p>
        </div>
        <div>
            <img src="img/12.jpg" alt="">
            <p>图片</p>
        </div>
        <div>
            <img src="img/13.jpg" alt="">
            <p>图片</p>
        </div>
    </div>