请珍惜小编劳动成果，该文章为小编原创，转载请注明出处。

觉得腾讯微博微频道里的那种布局方式很好，在这里利用CSS3简单的实现了一下。

先上一张效果图：

代码：

pubu.css

/* CSS Document */

.container{

width:60%;

margin-left:20%;

margin-right:20%;

background:#61A5D1;

float:right;

/*盒子*/

-webkit-column-width:160px;

-moz-column-width:160px;

-o-colum-width:160px;

-webkit-column-gap:1px;

-moz-column-gap:1px;

-o-column-gap:1px;

}

.box{

-webkit-border-radius:5px;

-moz-border-radius:5px;

border-radius:5px;

background:#D9D9D9;

border::#CCC 1px solid;

display:inline-block;

width:180px;    /*当把大小调成200，就会左右重合，不知道是什么问题*/

position:relative;

margin:5px;

}

pubu.html:

<!DOCTYPE>

<html>

<head>

<meta charset="utf-8">

<link href="style/pubu.css" rel="stylesheet" type="text/css" />

<title>CSS3瀑布布局</title>

</head>

<body>

<div class="container">    <!--经过试验，这里只能写成class="container“，如果写成id="container"会变成底部对齐-->

  <div  class="box"><img src="image/1.jpg" width="180px" />别小看我，我绝对不会放弃。我接受考试，就算一生只能当下忍，我也会成为火影给你们看的，没什么了不起的。——漩涡鸣人。（明天高考，做一个永远追梦的人）#火影忍者#</div>

  <div  class="box"><img src="image/2.jpg" width="180px" />我们依然坚强战胜每一次挫折,只是因为我们还活着.#火影忍者#</div>

   <div  class="box"><img src="image/3.jpg" width="180px" />你只看到我在不停的忙碌，却没看到我奋斗的热情。你有朝九晚五，我有通宵达旦。你否定我的现在，我决定我的未来。你可以轻视我的存在，我会用代码证明这是谁的时代！梦想是注定孤独的旅行，路上少不了质疑和嘲笑，但那又怎么样 。哪怕遍体鳞伤 也要coding。我是java程序员 我为自己代言！</div>

  <div style="height:150px" class="box"></div>

  <div style="height:320px" class="box"></div>

  <div style="height:340px" class="box"></div>

  <div style="height:220px" class="box"></div>

  <div style="height:270px" class="box"></div>

  <div style="height:220px" class="box"></div>

  <div style="height:220px" class="box"></div>

</div>

</body>

</html>

在这里只是简单的实现了一下，其中也存在一些问题没解决，而且不是很好看，大家可以自己美化一下。

版权声明：本文为博主原创文章，未经博主允许不得转载。

玩转CSS3(二)---CSS3实现瀑布布局的更多相关文章

  1. 玩转CSS3(一)----CSS3实现页面布局

    请珍惜小编劳动成果,该文章为小编原创,转载请注明出处. 摘要:     CSS3相对CSS2增加了一些新的布局方式:多栏布局和盒子布局.在这篇文章中,将对CSS2的布局进行简单的回忆,并总结CSS3的 ...

  2. [转]CSS3 Media Query实现响应布局

    讲到响应式布局, 相信大家都有一定的了解,响应式布局是今年很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果, 设计师提出了响应式布局的设计方案.今 ...

  3. CSS3的学习--实现瀑布流

    基于CSS3实现瀑布流,使用CSS3的CSS 多栏(Multi-column). 可以到github上下载源码 : https://github.com/CraryPrimitiveMan/water ...

  4. 第九十二节，html5+css3移动手机端流体布局，开篇知识

    html5+css3移动手机端流体布局,开篇知识 将项目设计成移动端可访问的页面,项目采用的是流体布局.也就是宽度以百分比自适应的,因为手机的屏幕大小不一致  一．整体设计     首先 我们要了解一 ...

  5. 解决CSS3多列样式column-width布局时内容被截断、错乱

    一.问题 使用CSS3的column-width: auto | <length>属性时,出现排列的内容被截断,出现错位的现象. 二.原因 需要为图片容器设置高度,不然会崩掉. 三.解决方 ...

  6. CSS3弹性盒模型flexbox布局基础版

    原文链接:http://caibaojian.com/using-flexbox.html 最近看了社区上的一些关于flexbox的很多文章,感觉都没有我这篇文章实在,最重要的兼容性问题好多人都没有提 ...

  7. 第九十四节，html5+css3移动手机端流体布局，旅游部分，媒体查询

    html5+css3移动手机端流体布局,旅游部分,媒体查询 媒体查询 媒体查询是手机网站和自适应网站的重要部分,媒体查询可以根据不同的屏幕大小,做响应的处理,如文字的大小,区块隐藏等等 媒体查询,这里 ...

  8. 第九十三节，html5+css3移动手机端流体布局，基础CSS,头部设计,轮播设计,底部设计

    html5+css3移动手机端流体布局,基础CSS,头部设计,轮播设计,底部设计 基础CSS 首先将通用css属性写好 @charset "utf-8"; /*通用样式*/ /*去 ...

  9. CSS3全览_最新布局

    CSS3全览_最新布局 目录 CSS3全览_最新布局 1. 浮动及其形状 2. 定位 3. 弹性盒布局 4. 栅格布局 5. 表格布局 作者: https://www.cnblogs.com/xiax ...

随机推荐

  1. obj-c编程18:多对多的观察者模式

    我们知道使用委托的设计模式可以实现一对一的通知关系,但是如果需要通知多个观察者状态变化又该如何呢?此时,需要实现观察者模式之类的内容,而不是实现委托者一对一的模式. 观察者模式定义了一个对象可以将另一 ...

  2. asp.net 下的中文分词检索工具 - jieba.net

    jieba是python下的一个检索库, 有人将这个库移植到了asp.net 平台下, 完全可以替代lucene.net以及盘古分词的搭配 之所以写这个, 其实是因为昨天面试时, 被问到网站的关键字检 ...

  3. http 状态表

    整理一下xmlHttp.status的值(http 状态表)   状态码 状态码 意义 释义 100 1xx (临时响应)表示临时响应并需要请求者继续执行操作的状态代码.  继续 客户端应当继续发送请 ...

  4. css3-------:before和:after的作用

    1.:before和:after的作用就是在指定的元素内容(而不是元素本身)之前或者之后插入一个包含content属性指定内容的行内元素,最基本的用法如下: <!doctype html> ...

  5. storm中的Scheduler

    Scheduler是storm的调度器,负责为topology分配当前集群中可用的资源.Storm分别提供了3中调度器: EvenScheduler:会将系统中的可用资源均匀地分配给当前需要任务分配的 ...

  6. happens-before规则和指令重排

                                                                                                         ...

  7. Mybatis 系列4

    上篇系列3中 介绍了properties与environments, 本篇继续讲剩下的配置节点之一:typeAliases. typeAliases节点主要用来设置别名,其实这是挺好用的一个功能, 通 ...

  8. window.open open new window?

    when ever i use window.location.href=//some url it always open a new window, this only happens when ...

  9. Spring Framework 5 中的新特性

    https://www.ibm.com/developerworks/cn/java/j-whats-new-in-spring-framework-5-theedom/index.html Spri ...

  10. Interface Development