简单实现瀑布流布局 html+css-一一网

这是我参与更文挑战的第26天

效果：

在这里插入图片描述

前言：

这个效果几行 css 代码就能搞定，但是其有个缺点是图顺序是从上到下排列再从左到右。没能实现从左到右再从上到下顺序排列。这样不利于最新图片优先显示的原则。所以其只适用在一些简单场景，复杂的瀑布流布局还是得用 js 实现。

实现：

1. 定义标签，main是底层盒子，.item里放图片，这里用了12张图：

<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>
复制代码

img 里的 src=”https://juejin.cn/post/picsum.photos/560/460?ran…” ，输入这个网址能随机获得一张图片，要在其里面指定宽高，如我是560*460的。

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个数。

以上就实现了瀑布流的简单效果了。

*4. 定义图片右上角的数字顺序：

.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%;
           
       }
复制代码

content: counter(bianhao); 文本为设定计数器内容。跟 item 里的counter-increment: bianhao;对应了。
position: absolute;
top: 0px;
right: 0px;
width: 20px;
height: 20px; 绝对定位在右上角。

完整代码：

<!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: 0;
       }
       .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>
复制代码