会写bug的大佬 2022-09-20 16:51

这种瀑布流布局是怎样实现的,最好能贴出详细css

如题,想要这种瀑布流效果,在不借助插件的情况,纯css实现

1条回答
最新 最热
如故 2022-09-20 16:58

这里我创建了一个div,里面用大小不同的box代表不同的图片

<div class="box">
    <div class="bg1">1</div>
    <div class="bg2">2</div>
    <div class="bg3">3</div>
    <div class="bg4">4</div>
    <div class="bg5">5</div>
    <div class="bg6">6</div>
    <div class="bg7">7</div>
    <div class="bg8">8</div>
</div>

css代码如下

    .box{
        column-count: 3;
        column-gap: 10px;
    }
    .bg1{margin-bottom:10px;text-align: center;background: red;height: 120px}
    .bg2{margin-bottom:10px;text-align: center;background: #13567a;height: 160px}
    .bg3{margin-bottom:10px;text-align: center;background: #2da937;height: 90px}
    .bg4{margin-bottom:10px;text-align: center;background: #3b25c4;height: 100px}
    .bg5{margin-bottom:10px;text-align: center;background: #1c2d9d;height: 129px}
    .bg6{margin-bottom:10px;text-align: center;background: #1c2d9d;height: 129px}
    .bg7{margin-bottom:10px;text-align: center;background: #1c2d9d;height: 129px}
    .bg8{margin-bottom:10px;text-align: center;background: #1c2d9d;height: 129px}

最终效果如下:

举报

10