css实现图片的瀑布流且右上角有计数

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>图片背景铺满</title>
        <style>
        .container{
            column-count: 4;
            column-gap: 2;
        } 
        .item{
               position: relative;
                padding: 2px;
                counter-increment: item-counter;
            } 
        .item::after{
               display: block;
               width: 24px;
               height: 24px;
               color: #fff;
               position: absolute;
               top: 2px;
               left: 2px;
               text-align: center;
               background-color: #000000;
               content: counter(item-counter);
           }
        img{
               display: block;
               width: 100%;
               height: auto;
        }
           
        </style>
    </head>
    <body>
        <div class="container">
                <div class="item"><img src="../A.jpg"/></div>
                <div class="item"><img src="../B.jpeg"/></div>
                <div class="item"><img src="../C.jpeg"/></div>
                <div class="item"><img src="../D.jpeg"/></div>
                <div class="item"><img src="../E.jpeg"/></div>
                <div class="item"><img src="../F.jpeg"/></div>
                <div class="item"><img src="../G.jpeg"/></div>
                <div class="item"><img src="../H.jpeg"/></div>
                <div class="item"><img src="../A.jpg"/></div>
                <div class="item"><img src="../B.jpeg"/></div>
                <div class="item"><img src="../C.jpeg"/></div>
                <div class="item"><img src="../D.jpeg"/></div>
                <div class="item"><img src="../E.jpeg"/></div>
                <div class="item"><img src="../F.jpeg"/></div>
                <div class="item"><img src="../G.jpeg"/></div>
                <div class="item"><img src="../H.jpeg"/></div>
        </div>
    
    </body>
</html>

相关阅读:
nginx配置文件语法高亮显示方法
GitLab服务器搭建及配置
Git服务器搭建及配置
SVN-Server搭建及配置
python之subprocess
jenkins配置从节点
jenkins邮箱配置以及结合ansible进行批量构建
tomcat+svn+maven+jenkins实现自动构建
tomcat结合memcached构建session服务器
基于tomcat集群做session共享

原文地址：https://www.cnblogs.com/ibear/p/15534448.html