使用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. MyBatis Mapper.xml文件中#{selector}和${selector}的区别

    1.优先使用#{paramName,jdbcType=VARCHAR} 写法,除了可以防止sql注入以外,它还能在参数里含有单引号的时候自动转义, 而${paramName}由于是类似于拼接sql的写 ...

  2. DelayQueue使用示例之KTV包厢记时

    在学习Java 多线程并发开发过程中,了解到DelayQueue类的主要作用:是一个无界的BlockingQueue,用于放置实现了Delayed接口的对象,其中的对象只能在其到期时才能从队列中取走. ...

  3. CSS3微信启动页天王星版

    今天被微信启动页刷屏了. 一直还以为启动页背景显示的月球的.今天才了解到这么有含义. 我也蹭一下微信的热度,做一个HTML+CSS版本的. 用CSS画地球太困难了,来个简单点的,天王星版. 主要使用到 ...

  4. notepad的快捷操作-代码速写

    (一)先安装zencode插件 (二)运用插件 第一步:键入:html:xt 再Ctrl+Alt+Enter键 得到 <!DOCTYPE html PUBLIC "-//W3C//DT ...

  5. JSP入门 文件上传

    commons-fileupload public void save(HttpServletRequest request,HttpServletResponse response) throws ...

  6. python数据结构之栈与队列

    python数据结构之栈与队列 用list实现堆栈stack 堆栈:后进先出 如何进?用append 如何出?用pop() >>> >>> stack = [3, ...

  7. 单独创建一个Android Test Project 时junit 的配置和使用

    现在的集成ADT后Eclipse都可以直接创建Android Test Project 如图所示: 命名后选择你要测试的单元程序,比如我自己准备测试sms,便可以如图所示那样选择 本人新建的测试工程为 ...

  8. GRE 协议简介

    1. 协议简介    gre(generic routing encapsulation,通用路由封装)协议是对某些网络层协议(如ip 和ipx)的数据报进行封装,使这些被封装的数据报能够在另一个网络 ...

  9. cookie存储中文

    写cookie         Cookie   chineseCookie   =   new   Cookie( "chineseCookie ",   URLEncoder. ...

  10. IDL 使用数组

    1.下标方式 IDL> array=indgen(8) IDL> print,array 0 1 2 3 4 5 6 7 IDL> print,array[3] IDL> ar ...