一个选择是用CSS3的多列columns，可以参考这篇文章。但这篇文章给的例子并不怎么好理解，我做了一些更改，在每个元素上加了序号。可以看到，多列布局是在每一列上依次排列元素的，第一列排完才开始排第二列，因为这里规定了4列，会尽量把元素数量均分到每一列。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<style type="text/css">

    .box{

        height: 123px;

        padding: 1em;

        margin-top: 1em;

        break-inside: avoid;

        border: 1px solid #000;

        background: #ccc;

    }

    .spe{

        height: 225px;

    }

    .box-wrapper{

        column-count:4;

        column-gap: 1em;

    }

  *{

    box-sizing:border-box;

  }

  .ggg{

    height: 100%;

    overflow-wrap: break-word

  }

</style>

<body>

  <div class="box-wrapper">

      <div style="margin-top:0px" class="box">1</div>

      <div class="box spe">2</div>

      <div class="box spe">3</div>

      <div class="box spe">4</div>

      <div class="box spe">5</div>

    <div class="box spe">6</div>

      <div class="box spe">7</div>

      <div class="box spe">8</div>

      <div class="box spe">9</div>

      <div class="box">10</div>

      <div class="box">11</div>

      <div class="box spe">12</div>

      <div class="box spe">13</div>

      <div class="box spe">14</div>

    <div class="box spe">15</div>

    <div class="box spe">16</div>

    <div class="box spe"></div>

    <div class="box spe"></div>

    <div class="box spe"></div>

    <div class="box spe"></div>

    <div class="box spe"></div>

    <div class="box ggg">ssssdsdsdajj</div>

  </div>

</body>

</html>

另外一种方式是使用flex，可以参考这篇文章  关于flex实现的更多细节没有再探究，目前项目中也没有遇到该类需求，把精力放在JS需求上。

瀑布流的一些CSS实现方式的更多相关文章

  1. 瀑布流的三种实现方式（原生js+jquery+css3）

    前言 项目需求要弄个瀑布流的页面,用的是waterfall这个插件,感觉还是可以的,项目赶就没自己的动手写.最近闲来没事,就自己写个.大致思路理清楚,还是挺好实现的... 原生javascript版 ...

  2. 用原生JavaScript实现图片瀑布流的浏览效果

    学习JS,活跃思维,灵活运用的一个较为典型的学习案例.同一个瀑布流的效果但实现方式却很多,利用递归.冒泡等等手法都可以达到你想要的目的.这次要说的就是利用类似递归来实现此效果的原创方案.此方案个人认为 ...

  3. 移动端三合一瀑布流插件（原生JS）

    没有前言,先上DEMO(手机上看效果更佳)和 原码. 瀑布流形式的图片布局方式在手机等移动端设备上运用广泛,比较常见的是下面前两种: 一.等宽等高 这种形式实现起来非常容易,这里就不再多说. 二.等宽 ...

  4. vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多

    一.思路分析和效果图 用vue来实现一个瀑布流效果,加载网络图片,同时有下拉刷新和上拉加载更多功能效果.然后针对这几个效果的实现,捋下思路: 根据加载数据的顺序,依次追加标签展示效果: 选择哪种方式实 ...

  5. jQuery无限载入瀑布流 【转载】

    转载至 http://wuyuans.com/2013/08/jquery-masonry-infinite-scroll/ jQuery无限载入瀑布流 好久没更新日志了,一来我比较懒,二来最近也比较 ...

  6. 分享：纯 css 瀑布流 和 js 瀑布流

    分享一次纯 css 瀑布流  和 js 瀑布流 纯 css 写瀑布流 1.multi-columns 方式: 通过 Multi-columns 相关的属性 column-count.column-ga ...

  7. 关于瀑布流的布局原理分析（纯CSS瀑布流与JS瀑布流）

    瀑布流 又称瀑布流式布局,是比较流行的一种网站页面布局方式.即多行等宽元素排列,后面的元素依次添加到其后,等宽不等高,根据图片原比例缩放直至宽度达到我们的要求,依次按照规则放入指定位置. 为什么使用瀑 ...

  8. 瀑布流的实现纯CSS实现Jquery实现

    瀑布流的实现 注:本文部分图片自百度下载,如有侵权,联系删图. 首先,选择几张图片布局到HTML内容中.HTML如下所示. <div class="wrapper"> ...

  9. 23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍

    01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换.div->span 设置display:inline   ...

随机推荐

  1. 洛谷 P1497 木牛流马

    P1497 木牛流马 题目描述 孔明造出了木牛流马 木牛者,方腹曲头,一脚四足,头入领中,舌著于腹.载多而行少,宜可大用,不可小使:特行者数十里,群行者二十里也.曲者为牛头,双者为牛脚,横者为牛领,转 ...

  2. Java判断1个字符串中出现了几次其他字符串

    public class Test { public static int count(String text,String sub){ , start =; ){ start += sub.leng ...

  3. 2013腾讯编程马拉松||HDU 4505 小Q系列故事——电梯里的爱情 水水水

    http://acm.hdu.edu.cn/showproblem.php?pid=4505 题目大意: 电梯最开始在0层,并且最后必须再回到0层才算一趟任务结束.假设在开始的时候已知电梯内的每个人要 ...

  4. HibernateCRUD基础框架(2)-HQL语句构造器(HqlQueryBuilder,HqlUpdateBuilder)

    上篇讲述了最基本的实体类,本篇接着讲述HQL语句构造器,包括查询和更新等. 优点:通过面向对象的方式构造HQL语句,更快捷,不需要手动拼接HQL. 缺点:封装可能降低性能,只能支持常用的和较为简单的H ...

  5. Android, IOS 史上最强多语言国际化，不仅第一次会尾随系统，并且会保存用户的语言设置

    劲爆消息,我提供源代码了.你能够先看完再下载.也能够先下载再看完, android源代码地址: https://github.com/hebiao6446/------Bluetooth-Androi ...

  6. C语言深度剖析-----最终的胜利

    进军C++ 初始OOP   抽象 封装 封装的好处,改名只需改封装 小结 面试题 指针运算 打印11,16,29,28,26 调试经验 printf定义,可变参数无法判断实际参数的类型 安全编程 数组 ...

  7. HDU 2587 - 很O_O的汉诺塔

    看题传送门 吐槽题目 叫什么很O_O的汉诺塔我还@.@呢. 本来是想过一段时间在来写题解的,不过有人找我要. 本来排名是第8的.然后搞了半天,弄到了第五.不过代码最短~ 截止目前就9个ID过,小小的成 ...

  8. 【例题 6-1 UVA - 210】Concurrency Simulator

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 队列模拟题. 注意初始化.. 然后题目中是让读入一个数据组数然后再输入数据的. 但样例..但样例没有!? [代码] #include ...

  9. zynq修改ramdisk文件系统

    ⑴ 挂载 Ramdisk新建目录 tmp, 并将 uramdisk.image.gz 拷贝至该目录$ cd <WORKDIR>/Filesystem$ mkdir tmp$ cp uram ...

  10. programming-challenges Crypt Kicker (110204) 题解

    我的解答,可是复杂度不是非常惬意,是一个指数级的复杂度.可是測试数据比較弱,还是ac了.在网上找了找.都是brute force的解法,不知道有没有更好的解法. 解答中犯了两个错误,第一个.map&l ...