CSS实现瀑布流布局

一首弦曲献仙音

已于 2023-04-19 16:19:55 修改

阅读量1.1k

点赞数

分类专栏：其他文章标签： css html 前端 Powered by 金山文档

于 2023-03-16 15:36:32 首次发布

本文链接：https://blog.csdn.net/qq_42660374/article/details/129530539

版权

其他专栏收录该内容

19 篇文章 0 订阅

订阅专栏

文章介绍了两种方法来实现网页的瀑布流布局。第一种是利用Flex布局，设置`flex-flow:columnwrap`和适当宽度的子元素。第二种是借助CSS的`column-count`和`column-gap`属性，将内容分栏展示，创建多列瀑布流效果。每种方法都配合了图片元素的全宽展示。

摘要由CSDN通过智能技术生成

html标签格式

<div class="box">
    <div class="item">
        <img  src="banner.jpg" alt="" />
    </div>
    <div class="item">
        <img  src="show.jpg" alt="" />
    </div>
    <div class="item">
        <img  src="cloth.jpg" alt="" />
    </div>
    <div class="item">
        <img  src="banner.jpg" alt="" />
    </div>
    <div class="item">
        <img  src="show.jpg" alt="" />
    </div>
    <div class="item">
        <img  src="cloth.jpg" alt="" />
    </div>
    <div class="item">
        <img  src="banner.jpg" alt="" />
    </div>
    <div class="item">
        <img  src="show.jpg" alt="" />
    </div>
    <div class="item">
        <img  src="cloth.jpg" alt="" />
    </div>
    <div class="item">
        <img  src="show.jpg" alt="" />
    </div>
    <div class="item">
        <img  src="cloth.jpg" alt="" />
    </div>
    <div class="item">
        <img  src="banner.jpg" alt="" />
    </div>
</div>

一、flex 弹性布局实现瀑布流

        .box {
          display: flex;  
          flex-flow:column wrap;
          height: 100vh;
        }
        .item {
            margin: 10px;
            width: calc(100%/3 - 20px);     //这里要展示几列就除于几
        }
        .item img{
            width: 100%;
            height:100%;
        }

二、column 多行布局实现瀑布流

column 实现瀑布流主要依赖两个属性。

一个是 column-count 属性，是分为多少列。

一个是 column-gap 属性，是设置列与列之间的距离。

        .box {
            margin: 10px;
            column-count: 3;
            column-gap: 10px;
        }
        .item {
            margin-bottom: 10px;
        }
        .item img{
            width: 100%;
            height:100%;
        }