响应式瀑布流的CSS简单实现

column-count属性将一个元素的内容分成指定数量的列

CSS代码

.images {
    column-count: 3;
}

.images>img {
    width: 100%;
    margin-bottom: 1em;
}

columns用来设置元素的列宽和列数 CSS代码

.images {
    columns: 300px;
}

.images>img {
    width: 100%;
    margin-bottom: 1em;
}

HTML代码

<div class="images">
    <img src="./images/pic1.jpg" alt="">
    <img src="./images/pic2.jpg" alt="">
    <img src="./images/pic3.jpg" alt="">
    <img src="./images/pic4.jpg" alt="">
    <img src="./images/pic5.jpg" alt="">
    <img src="./images/pic6.jpg" alt="">
    <img src="./images/pic7.jpg" alt="">
    <img src="./images/pic8.jpg" alt="">
    <img src="./images/pic9.jpg" alt="">
    <img src="./images/pic10.jpg" alt="">
    <img src="./images/pic11.jpg" alt="">
    <img src="./images/pic12.jpg" alt="">
    ......
</div>