简单实现瀑布流布局 html+css

实现：


<body>
    <main>
        <div class="item">
            <img src="https://picsum.photos/360/460?random=1" alt="">
        </div>
        <div class="item">
            <img src="https://picsum.photos/400/460?random=2" alt="">
        </div>
        <div class="item">
            <img src="https://picsum.photos/370/450?random=3" alt="">
        </div>
        <div class="item">
            <img src="https://picsum.photos/370/460?random=4" alt="">
        </div>
        <div class="item">
            <img src="https://picsum.photos/390/410?random=5" alt="">
        </div>
        <div class="item">
            <img src="https://picsum.photos/380/440?random=6" alt="">
        </div>
        <div class="item">
            <img src="https://picsum.photos/560/560?random=7" alt="">
        </div>
        <div class="item">
            <img src="https://picsum.photos/460/360?random=8" alt="">
        </div>
        <div class="item">
            <img src="https://picsum.photos/360/460?random=9" alt="">
        </div>
        <div class="item">
            <img src="https://picsum.photos/380/490?random=10" alt="">
        </div>
        <div class="item">
            <img src="https://picsum.photos/300/460?random=11" alt="">
        </div>
        <div class="item">
            <img src="https://picsum.photos/560/460?random=12" alt="">
        </div>
    </main>
</body>

2. 定义 main 样式，实现瀑布流布局

 main{
           column-count: 5;
           column-gap: 0;
       }

column-count: 5; 规定元素应该被划分的列数。我这分为5列。 column-gap: 0; 规定列间的间隔的像素。我这是 0 。

3. 定义 .item 和图片的样式，不设置 .item的宽高，让子元素图片撑开：

 .item{
           margin: 2px;
           position: relative;
           counter-increment: bianhao;
       }
 .item img{
           width: 100%;           
       }

counter-increment: xxx; 这个属性是设置某个选取器每次出现的计数器增量。默认增量是 1。我设置12个 .item，所以一共有12个数。

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        main {
            column-count: 5;
            column-gap: 10;
        }

        .item {
            margin: 2px;
            position: relative;
            counter-increment: bianhao;
        }

        .item img {
            width: 100%;
        }

        .item::after {
            content: counter(bianhao);
            position: absolute;
            top: 0px;
            right: 0px;
            width: 20px;
            height: 20px;
            background-color: black;
            line-height: 20px;
            text-align: center;
            font-size: 12px;
            color: white;
            border-bottom-left-radius: 50%;

        }
    </style>
</head>

<body>
    <main>
        <div class="item">
            <img src="https://picsum.photos/360/460?random=1" alt="">
        </div>
        <div class="item">
            <img src="https://picsum.photos/400/460?random=2" alt="">
        </div>
        <div class="item">
            <img src="https://picsum.photos/370/450?random=3" alt="">
        </div>
        <div class="item">
            <img src="https://picsum.photos/370/460?random=4" alt="">
        </div>
        <div class="item">
            <img src="https://picsum.photos/390/410?random=5" alt="">
        </div>
        <div class="item">
            <img src="https://picsum.photos/380/440?random=6" alt="">
        </div>
        <div class="item">
            <img src="https://picsum.photos/560/560?random=7" alt="">
        </div>
        <div class="item">
            <img src="https://picsum.photos/460/360?random=8" alt="">
        </div>
        <div class="item">
            <img src="https://picsum.photos/360/460?random=9" alt="">
        </div>
        <div class="item">
            <img src="https://picsum.photos/380/490?random=10" alt="">
        </div>
        <div class="item">
            <img src="https://picsum.photos/300/460?random=11" alt="">
        </div>
        <div class="item">
            <img src="https://picsum.photos/560/460?random=12" alt="">
        </div>
    </main>
</body>

</html>

总结：

主要是以下两个属性的应用。 column-count 属性。 column-gap 属性。次要可以了解： counter-increment 属性。 content: counter(xxx)；