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>

相关阅读:
CodeSmith-Select
winform显示、隐藏任务栏及开始菜单
WinForm水印文本框
添加自定义字体
判断网络地址是否是自动获取
设置本地网络为自动获取
获取本地连接ip 掩码网关 DNS
指定WinCE部署路径
SqlCeHelper
docker netcore

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