使用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. [UWP]分享一个基于HSV色轮的调色板应用

    1. 前言 上一篇文章介绍了HSV色轮,这次分享一个基于HSV色轮的调色板应用,应用地址:ColorfulBox - Microsoft Store 2. 功能 ColorfulBox是Adobe 色 ...

  2. scoke摘要

      登录|注册     关闭 永不磨灭的意志 /* ----------------500G的电影拷到了U盘上,U盘的重量会不会增加?----------------------*/       目录 ...

  3. IIC-BUS INTERFACE

    I2C总线是由Philips公司开发的一种简单.双向二线制同步串行总线.它只需要两根线即可在连接于总线上的器件之间传送信息. To control multi-master IIC-bus opera ...

  4. 使用百度ueditor的插件使得代码高亮显示

    一.在show.html模板中,引入ueditor的插件,并调用 <link rel="stylesheet" href="__ROOT__/Data/uedito ...

  5. Tomcat启动错误【Error listenerStart】

    今天启动Tomcat启动不了,报以下错: org.apache.catalina.core.StandardContext startInternal SEVERE: Error listenerSt ...

  6. python的urlparse

    urlparse主要是URL的分解和拼接,分析出URL中的各项参数,可以被其他的URL使用. 主要的函数有: 1.urlparse 将URL分解为6个片段,返回一个元组,包括协议.基地址.相对地址等等 ...

  7. IDL 结构体

    1.创建结构体 (1) 命名结构体 创建具有两个成员变量A.B的命名为str1的结构体 IDL> struct1={str1,a:1,b:2} IDL> help,struct1,/str ...

  8. C#解析XML详解（XPath以及带命名空间NameSpace）

    <?xml version="1.0" encoding="utf-8" ?> <bookstore> <book> < ...

  9. 记录一次因为硬盘写满造成的redis无法连接

    缘起: 今天早晨收到报警,服务不干活了,赶紧起来看问题... 为了尽快让服务可用,尝试重启服务,发现服务起不来,报错 redis connection failed! 看起来是redis挂了,但是发现 ...

  10. AmCharts 对数据排序后展示

    在官网看到的例子 给chart添加一个排序功能的handler AmCharts.addInitHandler( function(chart){ if (chart.orderByField === ...