使用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. OC——继承

    继承的其中一个很重要的目的是为了实现多态.我们现在先来看看OC的继承. 一.继承 父类: 头文件 // // Peason.h // 01-继承和多态 // // Created by zhangji ...

  2. Matlab入门学习（文件读写）

    一.save,load >> a=[ ]; >> b=[ ] b = >> save('b.mat','a','b');%a file named b.mat wi ...

  3. java集合系列——List集合之Stack介绍（五）

    1.Stack的简介 Stack 类表示后进先出(LIFO)的对象堆栈.它通过五个操作对类 Vector 进行了扩展 ,允许将向量视为堆栈.它提供了通常的 push 和 pop 操作,以及取堆栈顶点的 ...

  4. 每周分享一 之 webSocket

    一:什么是webSocket ? webSocket是HTML5出的新协议,WebSocket协议支持,在受控环境中运行不受信任代码的客户端与选择了该代码通信的远程主机之间进行双向通信. 简单翻译一下 ...

  5. 原创：TSP问题解决方案-----禁忌搜索算法C实现

    本文着重于算法的实现,对于理论部分可自行查看有关资料可以简略参考该博文:http://blog.csdn.net/u013007900/article/details/50379135 本文代码部分基 ...

  6. VB.net shell、IO.File.Open、Process.Start、Shellexecute API 运用经验总结

    打开文件还有很多方法,但我了解到运用较多的是上面几种- -,为了防止以后忘记,先把了解到的写下来. 1.Shell 这个看了很多网页,最靠谱的运用方法: Shell("cmd.exe /c ...

  7. 翻译 | 关键CSS和Webpack: 减少阻塞渲染的CSS的自动化解决方案

    原文地址: Critical CSS and Webpack: Automatically Minimize Render-Blocking CSS 原文作者: Anthony Gore 译者: 蜗牛 ...

  8. curl命令用于模拟http浏览器发起动作

    1.模拟http浏览器发起访问百度首页的动作 curl  http://www.baidu.com 2.也可以模拟http浏览器发起POST动作,这个在测试后端程序时非常常见.

  9. redis requires Ruby version >= 2.2.2问题

    最近在研究redis的集群,redis官方提供了redis-trib.rb工具,但是在使用之前 需要安装ruby,以及redis和ruby连接: yum -y install ruby ruby-de ...

  10. #云栖大会# 移动安全专场——APP渠道推广作弊攻防那些事儿（演讲速记）

    导语: 如今,移动互联网浪潮进入白热化竞争态势,APP渠道传播成为很多企业常用的推广方式,APP推广费用也在水涨船高,从PC时代的一个装机0.5元到1元不等,到移动互联网时代的5元,甚至几十元,但为什 ...