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>

 

posted @ 2021-11-10 17:26  一只懒懒的熊Zz  阅读(87)  评论(0)    收藏  举报