十月十号 2022-04-15 11:59 采纳率: 73.3%
浏览 34

##纯css实现瀑布流问题

现在通过flex布局横向的方式去实现瀑布流，但是发现后面行和前面行之间还是有空间，现在不知道怎么去解决

虽然竖向布局设置flex-directiopn:column可以实现，但是这个就要确定高度了，我现在是不想确定高度，想要横向排列。

img

  • 写回答

2条回答 默认 最新

  • 林一怂儿 前端领域新星创作者 2022-04-15 13:02
    关注

    两种方式，可以参考下。

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>
        /* 第一种 */

        .masonry {
            column-count: 4;
            column-gap: 0;
        }

        .item {
            padding: 2px;
            position: relative;
            counter-increment: item-counter;
        }

        .item img {
            display: block;
            width: 100%;
            height: auto;
        }

        .item::after {
            position: absolute;
            display: block;
            top: 2px;
            left: 2px;
            width: 24px;
            height: 24px;
            text-align: center;
            line-height: 24px;
            background-color: #000;
            color: #fff;
            content: counter(item-counter);

        }


        /* 第二种 */
        /* .masonry {
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            height: 1300px;
            width: 100%;
        }

        .item {
            position: relative;
            width: 25%;
            padding: 2px;
            box-sizing: border-box;
            counter-increment: item-counter;

        }

        .item:nth-child(4n+1) {
            order: 1;
        }

        .item:nth-child(4n+2) {
            order: 2;
        }

        .item:nth-child(4n+3) {
            order: 3;
        }

        .item:nth-child(4n) {
            order: 4;
        }

        .item img {
            display: block;
            width: 100%;
            height: auto;
        }

        .item::after {
            position: absolute;
            display: block;
            top: 2px;
            left: 2px;
            width: 24px;
            height: 24px;
            text-align: center;
            line-height: 24px;
            background-color: #000;
            color: #fff;
            content: counter(item-counter);

        } */
    </style>
</head>

<body>
    <div class="masonry">
        <div class="item">
            <img src="https://picsum.photos/360/460?random=1" alt="">
        </div>
        <div class="item">
            <img src="https://picsum.photos/360/360?random=2" alt="">
        </div>
        <div class="item">
            <img src="https://picsum.photos/360/260?random=3" alt="">
        </div>
        <div class="item">
            <img src="https://picsum.photos/360/560?random=4" alt="">
        </div>
        <div class="item">
            <img src="https://picsum.photos/360/260?random=5" alt="">
        </div>
        <div class="item">
            <img src="https://picsum.photos/360/320?random=6" alt="">
        </div>
        <div class="item">
            <img src="https://picsum.photos/360/310?random=7" alt="">
        </div>
        <div class="item">
            <img src="https://picsum.photos/360/330?random=8" alt="">
        </div>
        <div class="item">
            <img src="https://picsum.photos/360/310?random=9" alt="">
        </div>
        <div class="item">
            <img src="https://picsum.photos/360/140?random=10" alt="">
        </div>
        <div class="item">
            <img src="https://picsum.photos/360/240?random=11" alt="">
        </div>
        <div class="item">
            <img src="https://picsum.photos/360/640?random=12" alt="">
        </div>
        <div class="item">
            <img src="https://picsum.photos/360/440?random=13" alt="">
        </div>
        <div class="item">
            <img src="https://picsum.photos/360/240?random=14" alt="">
        </div>
        <div class="item">
            <img src="https://picsum.photos/360/130?random=15" alt="">
        </div>
        <div class="item">
            <img src="https://picsum.photos/360/640?random=16" alt="">
        </div>
        <div class="item">
            <img src="https://picsum.photos/360/430?random=17" alt="">
        </div>
        <div class="item">
            <img src="https://picsum.photos/360/460?random=18" alt="">
        </div>
    </div>

</body>

</html>
    评论 编辑记录

报告相同问题？

问题事件

  • 创建了问题 4月15日

悬赏问题

  • ¥15 Kylin-Desktop-V10-GFB-Release-JICAI_02- 2207-Build14-ARM64.iso有没有这个版本的系统啊
  • ¥15 能不能通过蓝牙将传感器数据传送到手机上
  • ¥20 100元python和数据科学实验项目
  • ¥15 根据时间在调用出列表
  • ¥15 FastReport.community 编辑，table只显示“每页”最顶部和底部横线
  • ¥15 R 包chipseeker 安装失败
  • ¥15 Veeam Backup & Replication 9.5 还原问题
  • ¥15 vue-print-nb
  • ¥15 winfrom的datagridview下拉框变成了黑色，渲染不成功
  • ¥20 利用ntfy实现短信推送