使用CSS3可以轻松实现瀑布流布局，但这种方法有个缺点，就是对于商城类型的网站，价格筛选时，并不能达到理想效果。

1、column-count 把div中的文本分为多少列

2、column-width 规定列宽

3、column-gap 规定列间隙

4、break-inside: avoid; 避免元素内部断行并产生新列

注意: Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。

代码如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>CSS3瀑布流</title>

     <style>

     /*大层*/

     .container{width:80%;margin: 0 auto;}

     /*瀑布流层*/

     .waterfall{

         -moz-column-count:4; /* Firefox */

         -webkit-column-count:4; /* Safari 和 Chrome */

         column-count:4;

         -moz-column-gap: 1em;

       -webkit-column-gap: 1em;

       column-gap: 1em;

     }

     /*一个内容层*/

     .item{

       padding: 1em;

       margin: 0 0 1em 0;

       -moz-page-break-inside: avoid;

       -webkit-column-break-inside: avoid;

       break-inside: avoid;

      border: 1px solid #000;

     }

     .item img{

         width: 100%;

         margin-bottom:10px;

     }

     </style>

 </head>

 <body>

     <div class="container">

         <div class="waterfall">

             <div class="item">

                 <img src="https://imgsa.baidu.com/baike/c0%3Dbaike72%2C5%2C5%2C72%2C24/sign=f3d4063328738bd4d02cba63c0e2ecb3/a2cc7cd98d1001e910616de1be0e7bec55e797fa.jpg">

                 <p>1 convallis timestamp</p>

            </div>

             <div class="item">

                 <img src="https://imgsa.baidu.com/baike/c0%3Dbaike92%2C5%2C5%2C92%2C30/sign=03948ea9b4315c60579863bdecd8a076/8326cffc1e178a825a6b5d1cfe03738da977e833.jpg">

                 <p>2 convallis timestamp 2 Donec a fermentum nisi. </p>

            </div>

             <div class="item">

                 <img src="https://imgsa.baidu.com/baike/c0%3Dbaike80%2C5%2C5%2C80%2C26/sign=3d645bf2d0ca7bcb6976cf7ddf600006/6d81800a19d8bc3efe5f64fb858ba61ea8d345af.jpg">

                 <p>3 Nullam eget lectus augue. Donec eu sem sit amet ligula

         faucibus suscipit. Suspendisse rutrum turpis quis nunc

         convallis quis aliquam mauris suscipit.</p>

            </div>

             <div class="item">

                 <img src="https://imgsa.baidu.com/baike/c0%3Dbaike180%2C5%2C5%2C180%2C60/sign=fbc3501b0a087bf469e15fbb93ba3c49/bf096b63f6246b60ea65dd24e3f81a4c510fa273.jpg">

                 <p> 4 Donec a fermentum nisi. Integer dolor est, commodo ut

         sagittis vitae, egestas at augue. </p>

            </div>

   <div class="item">

                 <img src="https://imgsa.baidu.com/baike/c0%3Dbaike150%2C5%2C5%2C150%2C50/sign=9fe1d71697ef76c6c4dff379fc7f969f/b03533fa828ba61ed2efcd184634970a304e5987.jpg">

                 <p> 5 Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue.</p>

            </div>

         </div>

     </div>

 </body>

 </html>

原文地址：http://www.cnblogs.com/tinyphp/p/6221523.html

使用css3实现瀑布流布局效果的更多相关文章

  1. 纯css3打造瀑布流布局

    纯css3打造瀑布流布局 原理: 1.column-count 把div中的文本分为多少列 2.column-width 规定列宽 3.column-gap 规定列间隙 4.break-inside: ...

  2. 超酷的响应式dribbble设计作品瀑布流布局效果

    相信做设计的朋友肯定都知道dribbble.com,它是一个非常棒的设计师分享作品的网站,全世界数以万计的设计高手和行家都在这个网站上分享自己的作品,当然,如果你常在上面闲逛的话,经常得到一些免费的好 ...

  3. CSS3实现瀑布流布局

    讲干货,不啰嗦,瀑布流布局是种常见的布局方式,常用于图片相关的样式展示,通过CSS3的多列(Multi-column)属性,可以简单的实现类似效果. 具体步骤: 1.设置外部容器多列列数(column ...

  4. 用CSS3实现瀑布流布局

    以前使用瀑布流都要用js,现在有了css3,可以轻松实现了. 掌握点: 1.column-count 把div中的文本分为多少列 2.column-width 规定列宽 3.column-gap 规定 ...

  5. javascript瀑布流布局效果

  6. CSS3学习总结——实现瀑布流布局与无限加载图片相册

    首先给大家看一下瀑布流布局与无限加载图片相册效果图: 一.pic1.html页面代码如下: <!DOCTYPE html> <html> <head> <me ...

  7. css3多列及瀑布流效果

    css3内容分块,多列效果(类似报纸版块排版): .div02{ /*count:内容分为几列,gap:内容与分割线的距离,rule:分割线样式*/ column-count:; column-gap ...

  8. css基础之 图片瀑布流布局：用CSS+DIV等宽格子堆砌瀑布流效果 （一）

    <!doctype html> <html> <head> <meta charset="UTF-8"/> <title> ...

  9. CSS3里的瀑布流效果

    页面伸缩之后,内部的布局会自动缩放,高度不同的内容也会自动以垂直瀑布的效果平铺. 下面就是一部分代码: CSS: /*大层*/ .container{width:%;margin: auto;} /* ...

随机推荐

  1. OSGi-开发环境的建立和HelloWorld(04)

    1 OSGi开发环境的建立 1.1 Equinox是什么 从代码角度来看,Equinox其实就是OSGi核心标准的完整实现,并且还在这个基础上增加了一些额外的功能(比如为框架增加了命令行和程序执行的入 ...

  2. Linux 安装 mysql 并配置

    1.下载 下载地址:http://dev.mysql.com/downloads/mysql/5.6.html#downloads 下载版本:我这里选择的5.6.33,通用版,linux下64位 也可 ...

  3. C#中的两把双刃剑：抽象类和接口

    问题出现: 这也是我在学习抽象类和接口的时候遇到的问题,从我归纳的这三个问题,不难看出这也许是我们大多数程序员遇到问题的三个阶段, 第一阶段(基础概念):就象问题1一样,这部分人首先需要扫清基础概念的 ...

  4. Java中的HTTP通信技术详解

     1.使用HTTP的Get方式读取网络数据       class ReadByGet extends Thread{ @Override public void run(){ URL url = n ...

  5. 巧用Mono.Cecil反射加载类型和方法信息

    最近在做服务的细粒度治理,统一管理所有服务的方法.参数.返回值信息.方便后续的各个模块之间的对接和协作. 目前系统中所有的服务,管理到接口契约粒度,即服务接口声明和服务接口实现.要做服务的细粒度治理: ...

  6. 配置 VirtualBox backend - 每天5分钟玩转 Docker 容器技术（75）

    Rexy-Ray 支持多种 backend,上一节我们已经安装配置了 Rex-Ray,今天演示如何配置 VirtualBox backend. 在 VirtualBox 宿主机,即我的笔记本上启动 v ...

  7. 在Ubuntu上安装Docker

    原文链接:https://docs.docker.com/engine/installation/linux/ubuntu/   这里记录的是社区版安装方式,由于平时只做开发使用所以不需要安装企业版, ...

  8. Java历程-初学篇 Day05选择结构(2)

    一,switch 由于本作者学的是jdk6.0版本,我知道7.0可以使用字符串,但是我就不改了 语法: switch(char类型/int类型){ case 值: //输出 break; ... de ...

  9. 实例化vue之前赋值html元素导致事件失效

    先实例化Vue对象,再操作其他对象,Vue对象声明时会渲染html容器内的所有元素, 会导致元素事件失效或dom元素重新创建,所以涉及html元素的对象都要在实例化Vue之后执行. 下面是简要的例子, ...

  10. Request.QueryString("id"）与Request("id")区别

    Request从几个集合取数据是有顺序的,从前到后的顺序依次是 QueryString,Form,最后是ServerVariables.Request对象按照这样的顺序依次搜索这几个集合中的变量,如果 ...