CSS总结——瀑布流布局

瀑布流布局

瀑布流布局是一种新型的布局方式,可以将大小不一的图片完整的显示在页面上,并且在杂乱的布局中保持着一定的美感,今天学习了一下如何使用瀑布流布局,总结了有以下三种方式。(瀑布流还可以使用grid布局实现,还没有学习过这种方式)

java 复制代码
<div class="container" id="con">
        <div class="item">
                <img src="../img/1.jpeg" alt="">
        </div>
        <div class="item">
                <img src="../img/2.jpeg" alt="">
        </div>
        <div class="item">
                <img src="../img/3.jpeg" alt="">
        </div>
        <div class="item">
                <img src="../img/4.jpeg" alt="">
        </div>
        <div class="item">
                <img src="../img/5.jpeg" alt="">
        </div>
        <div class="item">
                <img src="../img/6.jpeg" alt="">
        </div>
        <div class="item">
                <img src="../img/7.jpeg" alt="">
        </div>
        <div class="item">
                <img src="../img/8.jpeg" alt="">
        </div>
        <div class="item">
                <img src="../img/9.jpeg" alt="">
        </div>
        <div class="item">
            <img src="../img/10.jpeg" alt="">
        </div>
        <div class="item">
                <img src="../img/11.jpeg" alt="">
        </div>
        <div class="item">
                <img src="../img/12.jpeg" alt="">
        </div>
        <div class="item">
            <img src="../img/13.jpeg" alt="">
        </div>
        <div class="item">
                <img src="../img/14.jpeg" alt="">
        </div>
        <div class="item">
                <img src="../img/15.jpeg" alt="">
        </div>
    </div>
java 复制代码
 .container{
            column-count: 4;//想要排成的列数
            column-gap: 0;
        }
        .item img{
            width: 100%;
        }
相关推荐
dasseinzumtode9 分钟前
nestJS 使用ExcelJS 实现数据的excel导出功能
前端·后端·node.js
子兮曰12 分钟前
🔥C盘告急!WSL磁盘暴增?三招秒清20GB+空间
前端·windows·docker
Jinuss12 分钟前
Vue3源码reactivity响应式篇之EffectScope
前端·vue3
stoneship15 分钟前
网页截图API-Npm工具包分享
前端
Jedi Hongbin27 分钟前
Three.js shader内置矩阵注入
前端·javascript·three.js
etcix27 分钟前
dmenux.c: integrate dmenu project as one file
c语言·前端·算法
光影少年40 分钟前
react16到react19更新及底层实现是什么以及区别
前端·react.js·前端框架
超人不会飛43 分钟前
vue3 markdown组件|大模型应用专用
前端·vue.js·人工智能
じòぴé南冸じょうげん44 分钟前
微信小程序如何进行分包处理?
前端·小程序
Jolyne_1 小时前
Table自定义单元格渲染分享
前端