CSS超简单实现瀑布流

左手的ㄟ右手 2023-06-25 07:54 45阅读 0赞

摘要：其实现在瀑布流的应用很是广泛，没有什么指示体验不错，这里我们就使用最简单的来使用。

### 主要的就两个，一个是控制父类，一个控制包裹住图片的类 ###

<!DOCTYPE html>
    <html>
    <style>
        .father{
            width: 100%;
            box-sizing: border-box;
            column-count: 2;
            column-gap:15rpx;
            padding: 0 20rpx;
        }
        .list{
            box-sizing: border-box;
            overflow: hidden;
            break-inside: avoid;
            border: 1px solid #efefef;
            border-radius: 6px;
            margin-bottom: 6px;
            background: #ffffff;
        }
    </style>
    <body>
        <div class="father">
            <div class="list"></div>
            <div class="list"></div>
            <div class="list"></div>
            <div class="list"></div>
            <div class="list"></div>
            <div class="list"></div>
        </div>
    
    </body>
    </html>

如果你想看下效果图请参考详细版： [https://suxiexingchen.github.io/2019/12/27/32/][https_suxiexingchen.github.io_2019_12_27_32]

[https_suxiexingchen.github.io_2019_12_27_32]: https://suxiexingchen.github.io/2019/12/27/32/

发表评论取消回复

表情：

评论列表（有 0 条评论，45人围观）

还没有评论，来说两句吧...

相关阅读

相关【css3技巧(二)】之图片列表瀑布流（超简单css3实现瀑布流）

小程序列表图片瀑布流 > 样板是小程序。其他各种框架，技术都能实现，纯css. 1、view > 主要是图片的widthFix属性，宽度固定，高度自适应比例。 ...

我就是我/ 2024年04月17日 18:16/ 0 赞/ 108 阅读

相关如何使用CSS实现一个瀑布流布局？

聚沙成塔·每天进步一点点 ⭐ 专栏简介 ⭐ 使用CSS实现瀑布流布局 ⭐ 写在最后 -------------------- ⭐ 专栏简介前

ゞ浴缸里的玫瑰/ 2023年10月14日 21:29/ 0 赞/ 33 阅读

相关 CSS超简单实现瀑布流

摘要：其实现在瀑布流的应用很是广泛，没有什么指示体验不错，这里我们就使用最简单的来使用。主要的就两个，一个是控制父类，一个控制包裹住图片的类 <!DOCTYP

左手的ㄟ右手/ 2023年06月25日 07:54/ 0 赞/ 46 阅读

相关真的！！！两行css代码实现瀑布流，html,css最简单的瀑布流实现方式且没有缺点！...

（给前端宇宙加星标，提升前端小宇宙.） > 作者：coder94 > > https://segmentfault.com/a/1190000017866549

古城微笑少年丶/ 2023年02月24日 03:36/ 0 赞/ 15 阅读

相关 css瀑布流

简单效果图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

忘是亡心i/ 2022年12月20日 12:43/ 0 赞/ 228 阅读

相关 css3实现瀑布流图片特效

htmL: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti

忘是亡心i/ 2022年11月03日 11:52/ 0 赞/ 284 阅读

相关简单图片瀑布流

html部分 <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

àì夳堔傛蜴生んèń/ 2022年06月09日 13:24/ 0 赞/ 312 阅读

相关使用JavaScript实现简单的瀑布流

效果截图 ![SouthEast][] 基本思路每行展示固定数目的图片（假设为5），第一行从左至右依次展示5张图片，第6张放在前5张中高度最小的那张下方，

我不是女神ヾ/ 2022年06月01日 06:26/ 0 赞/ 243 阅读

相关 js简单瀑布流实现

什么是瀑布流瀑布流其实就是一种布局方式，比如说有很多模块，这些模块大小不一，怎样才能把这些模块相对漂亮的排列到一起？瀑布流就可以很好地解决这个问题。首先把这

柔情只为你懂/ 2022年05月10日 00:20/ 0 赞/ 334 阅读

相关 CSS3&JavaScript 瀑布流

实现方法概述 html页面要实现瀑布流，目前有两种方案，它们的适用场景不同 CSS3 的 column-count（适用于所有元素一次性加载，页面更新用分页来实现

我会带着你远行/ 2022年04月13日 07:44/ 0 赞/ 415 阅读