使用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. Sping IOC

    这2天学习了Spring的AOP  其中包括注解式和非注解式的配置  个人感觉注解式的配置非常好用.具体内容如下: 1.    AOP 面向切面编程 个人理解就是在一个写好的方法上增加一些新的功能   ...

  2. WebSocket In ASP.NET Core(二)

    WebSocket In ASP.NET Core(二) Server in ASP.NET-Core DI in ASP.NET-Core Routing in ASP.NET-Core Error ...

  3. hdfs存取文件机制

    HDFS和HBase是Hadoop中两种主要的存储文件系统,两者适用的场景不同,HDFS适用于大文件存储,HBASE适用于大量小文件存储.本文主要讲解HDFS文件系统中客户端是如何从Hadoop集群中 ...

  4. Hello PyQt5

    在 ubuntu 系统上 GUI 编程,PyQt5 是个不错的选择.首先,当然是安装 PyQt5 了.终端输入命令: pip3 install PyQt5 即可. 1. 建立一目录 x01.PyQtH ...

  5. 我的第一个python web开发框架（1）——前言

    由于之前经验不是很丰富,写的C#系统太过复杂,所以一直想重写,但学的越多越觉得自己懂的越少,越觉的底气不足.所以一直不敢动手,在内心深处对自己讲,要静下心来认真学习,继续沉淀沉淀.这两年多以来找各种机 ...

  6. oss滤网图片音视频过滤(1)内容检测

    图片音视频过滤有好多方法,我这里就不一一介绍了,这篇文章只是简单介绍一下我在项目中使用阿里云oss滤网过滤的步骤 1.所遇问题: 1.图片视频鉴别时要设置textScanRequest.setUriP ...

  7. Find 找规律，递推

    Find Time Limit: 2000/1000MS (Java/Others) Memory Limit: 128000/64000KB (Java/Others) SubmitStatus P ...

  8. poj3468（一维）（区间查询，区间修改）

    A Simple Problem with Integers You have N integers, A1, A2, ... , AN. You need to deal with two kind ...

  9. Java历程-初学篇 Day04选择结构(1)

    一,if 1,单分支 if(条件){ } 示例: 2,双分支 if(条件){ }else{ } 示例: 3,多重if if(条件){ }else if(条件){ }else{ } 示例: 4,嵌套if ...

  10. UpdatePanel控件的使用和局部刷新

    http://www.cnblogs.com/baiefjg/archive/2009/06/14/1502813.html