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

觉得腾讯微博微频道里的那种布局方式很好，在这里利用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. 速度之王 — LZ4压缩算法（二）

    LZ4 (Extremely Fast Compression algorithm) 项目:http://code.google.com/p/lz4/ 作者:Yann Collet 本文作者:zhan ...

  2. android的左右侧滑菜单实现

    最近看了很多app应用都采用的是左右侧滑,比如网易新闻.凡客等 这里也试着写一下侧滑 首先看一下效果 然后给出xml布局代码 <RelativeLayout xmlns:android=&quo ...

  3. objc写一个NSMutableArray不连续索引替换对象的方法

    NSMutableArray内置的方法-(void)replaceObjectsAtIndexes:(NSIndexSet*)set withObjects:(NSArray*)objs 只能替换一段 ...

  4. DB Query Analyzer 5.05 is released, 65 articles concerned have been published

    DB Query Analyzer 5.05 is released, 65 articles concerned have been published DB Query Analyzer is p ...

  5. 解决Cell重用内容混乱的几种简单方法,有些方法会增加内存

    重用实现分析 查看UITableView头文件,会找到NSMutableArray*  visiableCells,和NSMutableDictnery* reusableTableCells两个结构 ...

  6. javascript操作select元素一例

    熟悉一下js对select元素的操作,html页面中建立一个form,其中包含一个select元素和submit按钮. 当选择select中某一项时改变其文字,当select中所有项的文字都改变后,重 ...

  7. CentOS6.4下安装Nginx1.12.2

    1.安装GCC安装 nginx 需要先将官网下载的源码进行编译,编译依赖 gcc 环境,如果没有 gcc 环境,则需要安装 yum install gcc-c++ 2.安装PCRE-devel PCR ...

  8. javaScript(8)---对象和数组

    javaScript(8)---对象和数组 学习要点: 1.Object类型 2.Array类型 3.对象中的方法 什么是对象,其实就是一种类型,即引用类型.而对象的值就是引用类型的实例.在ECMAS ...

  9. JavaScript 将两个数组合并，且删除重复的值

    var a=[1,2,3,4,5,8,9,10]; var b=[6,7,8,9,10]; var c = a.concat(b);//合并成一个数组 console.log(c) temp = {} ...

  10. 正确截取List指定位置的内容

    正确截取List指定位置的内容 import java.util.ArrayList; import java.util.List; public class ListUtils { public s ...