CSS3功能挺強大，覺得幾行代碼就可以搞定一個效果滋恬，這幾天學了一個瀑布流效果浅乔，還挺喜歡的挑围。
效果圖：
一礁竞、原理圖
在一個大盒子里，放置多個小盒子杉辙，小盒子的大小可以不一致模捂，長短不一樣，呈現一種瀑布流的效果蜘矢。
二狂男、body部分代碼
<body>
<div id="con">//建立的大盒子
//下面是內容區(qū)，就放一個盒子品腹，其他的跟它是一樣的
<div class="pic">
<img src="images/1.jpg" width="188px" /> //插入圖片
<h3><a href="#">野蠻生長</a></h3> //下面的標題
<p>人長大的標志：試著聽從自己內心的聲音岖食，而不去在乎外面的聲
音，等待和拖延是世界上最容易壓垮一個人得東西舞吭。猶豫不決是你
最大的敵人泡垃。能看書就不要發(fā)呆析珊，能碎覺就不要拖延，能吃飯就不
要餓著蔑穴，能親吻就不要說話忠寻，能找到自己想做的事情就不容易了，
青春得浪費在美好事物上存和。
</p> //文字內容
</div> //這個內容盒子可以多復制一些锡溯，只要計算好大盒子的寬度和小盒子的數量就好了
</div>
</body>
三、CSS3代碼
*{padding:0;margin:0}
/*給大盒子添加樣式*/
#con{width:980px;margin:60px auto;border-radius:25px;box-shadow:5px 5px 10px #000;padding:20px;
/*下面代碼是兼容各個瀏覽器的哑姚，并實現了四列，沒兩列之間間距為30px芜茵，*/
-moz-column-count:4;-moz-column-gap:30px;-moz-column-rule:0px solid #ff0000; //火狐瀏覽器
-webkit-column-count:4;-webkit-column-gap:30px;-webkit-column-rule:0px solid #ff0000; //Google chrome
-o-column-count:4;-o-column-gap:30px;-o-column-rule:0px solid #ff0000; //Opera瀏覽器的
}
/*小盒子內容區(qū)的樣式叙量，display:inline-block：實現 效果*/
#con .pic{width:188px; min-height:100px;box-shadow:2px 2px 6px #b5b5b5;padding:20px 15px;margin:10px;display:inline-block}
#con h3{border-bottom:1px solid #ddd;line-height:30px;text-align:center;padding:5px 5px;}
#con h3 a{text-decoration:none;color:#999;}
#con p{font-size:12px;color:#666;line-height:20px;white-space:nowrap;overflow:hidden;
/*很多文字，一行顯示不下九串，用省略號顯示的代碼*/
text-overflow:ellipsis;-o-text-overflow:ellipsis;
-moz-text-overflow: ellipsis; -webkit-text-overflow: ellipsis; }
話說绞佩，CSS3真心強大，以前看到瀑布流樣式的圖片猪钮，從來沒想過會這么簡單品山，幾行代碼就能輕松搞定。
Ps：親測烤低，火狐肘交、搜狗瀏覽器都出現這個效果了。
