CSS实现瀑布流布局

已于 2022-08-25 18:03:03 修改
阅读量1.8k 收藏 2
点赞数 2
文章标签： javascript 前端 html
于 2022-08-25 18:00:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/King0217/article/details/126529839
版权

效果图如下

在这里插入图片描述

一、代码

主要是column属性

column-count: auto;
column-width: 150px;
column-gap: 60px;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>


        .waterfalls-flow-box {
            column-count: auto;
            column-width: 150px;
            column-gap: 60px;
            margin: 80px;

        }

        .waterfalls-flow-box .item {
            margin-bottom: 60px;
            /*这两个属性，解决内容被隔断*/
            height: 100%;
            overflow: hidden;

        }

        .waterfalls-flow-box .item .title {
            color: #ff6a00;
            font-size: 14px;
            line-height: 14px;
            margin-bottom: 20px;
            font-weight: 600;
        }

        .waterfalls-flow-box .item p {

            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin: 0;
            color: #181818;
            font-size: 14px;
            padding: 8px 0;
        }

        .waterfalls-flow-box .item p:hover {
            color: #ff6a00;
            cursor: pointer;
        }

    </style>
</head>
<body>

<div class="waterfalls-flow-box">
    <div class="item">
        <div class="title">序列 1</div>
        <div>
            <p>内容 </p>
            <p>我是多行</p>
            <p>我是多行</p>
            <p>我是多行</p>
            <p>我是多行</p>
            <p>我是多行</p>
            <p>我是多行</p>
            <p>我内容比较多多多多多多</p>
            <p>我内容比较多多多多多多</p>
            <p>我内容比较多多多多多多</p>
            <p>我内容比较多多多多多多</p>
            <p>我是多行</p>
            <p>我是多行</p>
            <p>我是多行</p>
            <p>我是多行</p>
            <p>我是多行</p>

        </div>

    </div>
    <div class="item">
        <div class="title">序列 2</div>
        <p>内容 2</p>

        <p>我是多行</p>
        <p>我是多行</p>
    </div>
    <div class="item">
        <div class="title">序列 3</div>
        <div>
            <p>内容 3</p>
            <p>我是多行</p>
            <p>我是多行</p>
            <p>我是多行</p>
            <p>我内容比较多多多多多多</p>
            <p>我内容比较多多多多多多</p>
            <p>我是多行</p>
        </div>
    </div>
    <div class="item">
        <div class="title">序列 4</div>
        <div>
            <p>内容 3</p>
            <p>我是多行</p>
            <p>我是多行</p>
            <p>我是多行</p>
            <p>我是多行</p>
        </div>
    </div>
    <div class="item">
        <div class="title">序列 5</div>
        <div>
            <p>内容 3</p>
            <p>我是多行</p>
            <p>我是多行</p>
            <p>我是多行</p>
            <p>我是多行</p>
        </div>
    </div>
    <div class="item">
        <div class="title">序列 6</div>
        <div>
            <p>内容 3</p>
            <p>我是多行</p>
            <p>我是多行</p>
            <p>是多行</p>
            <p>我是多行</p>
            <p>我是多行</p>
            <p>我内容比较多多多多多多</p>
            <p>我内容比较多多多多多多</p>
            <p>我内容比较多多多多多多</p>
            <p>我内容比较多多多多多多</p>
            <p>我内容比较多多多多多多</p>
            <p>我内容比较多多多多多多</p>
            <p>我是多行</p>
        </div>
    </div>
    <div class="item">
        <div class="title">序列 7</div>
        <div>
            <p>内容 3</p>
            <p>我是多行</p>
            <p>我是是是多行</p>
            <p>我是多行</p>
            <p>我是多多多行</p>
            <p>我是多行</p>
        </div>
    </div>
    <div class="item">
        <div class="title">序列 8</div>
        <div>
            <p>内容 3</p>
            <p>我是多行</p>
            <p>我是多行</p>
            <p>我是我是多行</p>
            <p>我是多是多行</p>
            <p>我是多多行</p>
            <p>我是多行多行多行</p>
            <p>我是多行</p>
            <p>我是多行多行多行多行</p>
            <p>我是多行</p>
            <p>我是多行</p>
            <p>我是多行</p>
        </div>
    </div>
    <div class="item">
        <div class="title">序列 9</div>
        <div>
            <p>我内容比较多多多多多多</p>
            <p>我内容比较多多多多多多</p>
            <p>我是多行</p>
            <p>我是多行</p>
            <p>我是多行</p>
        </div>
    </div>
    <div class="item">
        <div class="title">序列 10</div>
        <div>
            <p>内容 3</p>
            <p>我是多行</p>
            <p>我是多是多是多行</p>
            <p>我是行</p>
            <p>我是行</p>
            <p>我是多行</p>
        </div>
    </div>
    <div class="item">
        <div class="title">序列 11</div>
        <div>
            <p>内容 3</p>
            <p>我是多行</p>
            <p>我行</p>
            <p>我是多是多行</p>
            <p>我是多行</p>
        </div>
    </div>

    <div class="item">
        <div class="title">序列 12</div>
        <div>
            <p>内容 13</p>
            <p>我是多行</p>
            <p>我是多行</p>
            <p>我是多行我是多行我是多行</p>
            <p>我是多行</p>
            <p>我是多行</p>
            <p>我是多行</p>
            <p>我是多行</p>
            <p>我是多行</p>
            <p>我是多行</p>
        </div>
    </div>
    <div class="item">
        <div class="title">序列 13</div>
        <div>
            <p>内容 4</p>
            <p>我是多行</p>
            <p>我是多行是多行是多行是多行是多行是多行</p>
            <p>我是多行</p>
            <p>我是多行</p>
            <p>我是多行</p>
            <p>我是多行</p>
            <p>我是多行是多行是多行</p>
            <p>我是多行</p>
            <p>我是多行</p>
        </div>
    </div>
    <div class="item">
        <div class="title">序列 14</div>
        <div>
            <p>内容 4</p>
            <p>我是多行</p>
            <p>我是多行是多行</p>
            <p>我是多行</p>
            <p>我是多行是多行是多行是多行</p>
            <p>我是多行</p>
            <p>我是多多多行</p>
            <p>我是多多多行</p>
            <p>我是多多多行</p>
            <p>我是多行</p>
            <p>我是多行</p>
        </div>
    </div>
    <div class="item">
        <div class="title">序列 15</div>
        <div>
            <p>内容 4</p>
            <p>我是多行</p>
            <p>我是多多行</p>
            <p>我是多行</p>
            <p>我是多行</p>
            <p>我是多行我是多行我是多行</p>
            <p>我是多行我是多行我是多行</p>
            <p>我是多行我是多行我是多行</p>
            <p>我是多行我是多行我是多行</p>
            <p>我是多行我是多行我是多行</p>
            <p>我是多行我是多行我是多行</p>
            <p>我是多行我是多行我是多行</p>
            <p>我是多行我是多行我是多行</p>
            <p>我是多行</p>
            <p>我是多行</p>
            <p>我是多行</p>
        </div>
    </div>
    <div class="item">
        <div class="title">序列 16</div>
        <div>
            <p>内容 4</p>
            <p>我是多行</p>
            <p>我是多行多行</p>
            <p>我是多行</p>
            <p>我是我是多行</p>
            <p>我是多行</p>
            <p>我是多是多行</p>
            <p>我是多行</p>
            <p>我是多行</p>
        </div>
    </div>
    <div class="item">
        <div class="title">序列 17</div>
        <div>
            <p>内容 4</p>
            <p>我是多多多多多行</p>
            <p>我是多行</p>
            <p>我是多是多是多行</p>
            <p>我是多行是多行</p>
            <p>我是多行</p>
            <p>我是</p>
            <p>我是多行</p>
            <p>我是多是多是多是多是多行</p>
            <p>我是多是多是多是多是多行</p>
        </div>
    </div>
    <div class="item">
        <div class="title">序列 18</div>
        <div>
            <p>内容 4</p>
            <p>我是多是多行</p>
            <p>我是多行</p>
            <p>我是多行</p>
            <p>我是多行是多行</p>
            <p>我是多行</p>
            <p>我是多是多是多是多是多行</p>
            <p>我是多行</p>
            <p>我是多行</p>
        </div>
    </div>
    <div class="item">
        <div class="title">序列 19</div>
        <div>
            <p>内容 4</p>
            <p>我是多多行</p>
            <p>我是多行</p>
            <p>我是多行</p>
            <p>我是多多多多行</p>
            <p>我是多行</p>
            <p>我是多多多多多行</p>
            <p>我是多行</p>
            <p>我是多行</p>
        </div>
    </div>
    <div class="item">
        <div class="title">序列 20</div>
        <div>
            <p>内容 4</p>
            <p>我是多行</p>
            <p>我是多行</p>
            <p>我是多行是多行是多行是多行是多行</p>
            <p>我是多行</p>
            <p>我是多行</p>
            <p>我是多行</p>
            <p>我是</p>
            <p>我是</p>
            <p>我是</p>
            <p>我是</p>
            <p>我是多行</p>
            <p>我是多多多多多多行</p>
            <p>我是多行</p>
            <p>我是多行</p>
            <p>我是多行</p>
        </div>
    </div>

    <div class="item">
        <div class="title">序列 21</div>
        <div>
            <p>内容 4</p>
            <p>我是多行</p>
            <p>我是多行</p>
            <p>我是多行我是多行</p>
            <p>我是多行</p>
            <p>我是多行我是多行</p>
            <p>我是多行</p>
            <p>我是多是多是多是多是多行</p>
            <p>我是多行</p>
            <p>我是多行我是多行</p>
            <p>我是多行</p>
            <p>我是多是多是多是多是多行</p>
            <p>我是多行</p>
        </div>
    </div>
</div>

</body>
<script>
</script>
</html>
Hui-1018
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
瀑布流布局（CSS flex实现）
一起学习一起进步~
10-09 1156
【代码】瀑布流布局（CSS flex实现）
瀑布流布局isotope.js
04-13
实现html瀑布流布局，亲测可以使用，用法: $(function(){ //需要瀑布流布局的容器 var $container = $(".float-wrap"); $container.imagesLoaded( function(){ $container.isotope({ isResizableL:true, //瀑布流布局子对象 itemSelector :'.item' }); }); });
实现瀑布流布局的四种方法
Smile_666666的博客
05-13 2万+
一、 什么是瀑布流布局 1、是什么 页面上是一种 参差不齐 的多栏布局，类似上图所示随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部，大部分为图片，图片 固定 宽度，高度 不一，根据原比例缩放到宽度达到固定的要求，每行排满后，新的图片添加到后面 2、特点 固定宽度，高度不一 岑参不齐的布局 以图片为主 二、有什么优缺点 1、优点 节省空间：降低页面的复杂 对于 触屏设备非常友好：通过向上滑动浏览，交互方式更符合直觉 良好的视觉体验：浏览时不会被页面整整齐齐的高度影响，
洗衣机模糊推理系统的实现1
08-08
模糊洗衣机的推理如图：水位水位模糊推理模糊推理水位水位模糊推理模糊推理洗涤时间洗涤时间布质布质洗涤时间洗涤时间布质布质水流水流布量布量水流水流布量布量漂洗方式漂
css3 column多列布局—瀑布流效果
m0_64520392的博客
03-14 506
css3 column多列布局—瀑布流效果
重介浅槽深度分选细粒级煤的应用与改进
06-14
阐述了W26F54重介浅槽分选机的结构、原理及特性,介绍了该分选机在李家壕选煤厂分选100~6 mm细料粒级煤的应用与改进;实践表明,如要降低分选下限,增加细粒级煤的分选,就应适当扩大上升流布流板孔径,增大浅槽槽宽,增大浅槽的分选能力,同时对配套系统进行相应改进。
瀑布个人介绍bootstrap模板
03-31
瀑布个人介绍bootstrap模板
纯css3实现横向瀑布流布局，横向瀑布流代码.zip
07-20
纯css3实现横向瀑布流布局，让图片看起来更美观。
CSS总结——瀑布流布局
热门推荐
qq_53008257的博客
05-07 4万+
瀑布流布局 瀑布流布局是一种新型的布局方式，可以将大小不一的图片完整的显示在页面上，并且在杂乱的布局中保持着一定的美感，今天学习了一下如何使用瀑布流布局，总结了有以下三种方式。（瀑布流还可以使用grid布局实现，还没有学习过这种方式） 瀑布流的实现方法可以用纯CSS，也可以用JS实现，如何选取决于需求,这几种方法各有优略，如何选取取决于需求。以下案例均采用如下的html代码 <div class="container" id="con"> <div class="item
如何使用CSS实现一个瀑布流布局？
官方推荐
08-17 9306
如何使用CSS实现一个瀑布流布局？
CSS实现瀑布流的两种方式
m0_74265396的博客
11-10 643
column。
祁门县文堂村木活字印刷技艺调查研究 (2013年)
05-14
木活字印刷术自发明以来，流布甚广，代有传承，时有创新。通过实地考察，对文堂村木活字印刷者所供奉的神
三种方式实现瀑布流布局
10-20
本文主要介绍了分别使用javascript，jquery，css实现瀑布流布局的方法。具有很好的参考价值，下面跟着小编一起来看下吧
用CSS3实现瀑布流布局的示例代码
09-24
主要介绍了用CSS3实现瀑布流布局的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
CSS3不规则瀑布流布局特效
04-02
CSS3不规则瀑布流布局特效是一款纯CSS3实现倾角瀑布流特效，带滤镜效果。
css3 column实现卡片瀑布流布局的示例代码
09-24
主要介绍了css3 column实现卡片瀑布流布局的示例代码的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
CSS3实现瀑布流布局与无限加载图片相册的实例代码
12-13
五、了解更多瀑布流布局的的知识 首先给大家看一下瀑布流布局与无限加载图片相册效果图： 一、pic1.html页面代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title&...
css 商城 两列_2020年CSS新特性Web排版
weixin_39716264的博客
10-22 315
subgridCSS Grid布局是Web布局模式中唯一一种二维布局，也是我自己最认可的布局模式(至少到目前为止还没有发现比Grid更强大的)。如果你从未接触过Grid布局的话，你可以把他想象成最初的table布局，因为他们俩之间有很多概念都非常的相似。随着Web布局技术不断的更新以及浏览器不断的发展，现在使用Grid布局的越来越多，特别是今年以来，Grid和Flexbox布局的占比越来...
css 瀑布流布局_干货来袭！web前端开发工程师必看之如何使用CSS3实现瀑布流效果？...
weixin_39870155的博客
11-29 321
首先,我们来看一下什么是瀑布流布局效果,比如电商网站 蘑菇街原理图:在一个大盒子里，放置多个小盒子，小盒子的大小可以不一致，长短不一样，呈现一种瀑布流的效果。使用CSS3S实现只需要如下4步:1. 准备图片素材2. 书写相应HTML结构3. 了解CSS 多栏(Multi-column) 属性4. 使用CSS 多栏属性完成瀑布流布局一、第一步 —— 准备图片素材目标 : 准备图片素材,每张图片的宽度...
css grid布局实现瀑布流
最新发布
05-25
使用 CSS Grid 布局可以实现瀑布流布局，具体步骤如下： 1. 在父元素上应用 grid 布局，将其划分为多个网格列，每一列的宽度相等，并且宽度可以根据需要进行调整。 2. 将子元素放置到网格中，使用 grid-row-start ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Hui-1018

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值