css3实现瀑布流效果
2017-02-09 16:42
337 查看
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3瀑布流布局</title>
<style type="text/css">
body {
background-color: #f1f1f1;
}
.container {
width: 60%;
margin: 0 auto;
font-size: 14px;
color: #333;
}
.column-box {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
column-gap: 1em;
}
.column-item {
padding: 0.2em;
-moz-page-break-inside: avoid; /*避免在元素内部插入分页符*/
-webkit-column-break-inside: avoid;
break-inside: avoid;
background: white;
-moz-box-shadow: 0 1px 3px 0 rgba(0,0,0,0.12), 0 1px 2px 0 rgba(0,0,0,0.24);
-webkit-box-shadow: 0 1px 3px 0 rgba(0,0,0,0.12), 0 1px 2px 0 rgba(0,0,0,0.24);
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.12), 0 1px 2px 0 rgba(0,0,0,0.24);
}
.column-item img.bigimg {
width: 100%;
padding-bottom: 1em;
border-bottom: 1px solid #ccc;
}
.verticalAlign {
vertical-align: middle;
}
.user {
padding-bottom: 0.5em;
}
.user p {
font-size: 14px;
color: #666;
padding: 0;
line-height: 8px;
}
.user p:first-child {
padding-top: 8px;
}
.user p span {
font-size: 12px;
color: #999;
}
.column-item-2 {
width: 20%;
float: left;
}
.column-item-2 img {
width: 100%;
border-radius: 50%;
}
.column-item-2 img:after {
content: '';
height: 1px;
-webkit-transform: scaleY(0.5);
background: #fff;
}
.column-item-10 {
width: 80%;
}
</style>
</head>
<body>
<div class="container">
<div class="column-box">
<div class="column-item">
<img class="bigimg" src="http://img2.3lian.com/2014/c7/12/d/77.jpg"/>
<div class="intro">
<p>精致的木耳边小高领衬衫文艺范十足，外搭一件撞色菱形格纹针织背心，很有层次感的搭配。再加上一条大摆的高腰短裙，学院风满满，时尚又减龄的穿搭。</p>
<div class="user">
<div class="verticalAlign column-item-2">
<img class="img" src="http://img2.3lian.com/img2009/06/16/024.jpg"/>
</div>
<div class="verticalAlign column-item-10">
<p>爱爱丸AIAIWAN </p>
<p><span>发布到</span> 爱爱丸AIAIWAN </p>
</div>
</div>
</div>
</div>
<div class="column-item">
<img class="bigimg" src="http://pic3.zhongsou.com/image/380816720fbbb24e30c.jpg"/>
<div class="intro">
<p>精致的木耳边小高领衬衫文艺范十足，外搭一件撞色菱形格纹针织背心，很有层次感的搭配。再加上一条大摆的高腰短裙，学院风满满，时尚又减龄的穿搭。</p>
<div class="user">
<div class="verticalAlign column-item-2">
<img class="img" src="http://img2.3lian.com/img2009/06/16/024.jpg"/>
</div>
<div class="verticalAlign column-item-10">
<p>爱爱丸AIAIWAN </p>
<p><span>发布到</span> 爱爱丸AIAIWAN </p>
</div>
</div>
</div>
</div>
<div class="column-item">
<img class="bigimg" src="http://img157.ph.126.net/86BixRkjcPin6rHQgf97qA==/2250955388756401314.jpg"/>
<div class="intro">
<p>精致的木耳边小高领衬衫文艺范十足，外搭一件撞色菱形格纹针织背心，很有层次感的搭配。再加上一条大摆的高腰短裙，学院风满满，时尚又减龄的穿搭。</p>
<div class="user">
<div class="verticalAlign column-item-2">
<img class="img" src="http://img2.3lian.com/img2009/06/16/024.jpg"/>
</div>
<div class="verticalAlign column-item-10">
<p>爱爱丸AIAIWAN </p>
<p><span>发布到</span> 爱爱丸AIAIWAN </p>
</div>
</div>
</div>
</div>
<div class="column-item">
<img class="bigimg" src="http://img2.100bt.com/upload/ttq/20131013/1381643332781_middle.jpg"/>
<div class="intro">
<p>精致的木耳边小高领衬衫文艺范十足，外搭一件撞色菱形格纹针织背心，很有层次感的搭配。再加上一条大摆的高腰短裙，学院风满满，时尚又减龄的穿搭。</p>
<div class="user">
<div class="verticalAlign column-item-2">
<img class="img" src="http://img2.3lian.com/img2009/06/16/024.jpg"/>
</div>
<div class="verticalAlign column-item-10">
<p>爱爱丸AIAIWAN </p>
<p><span>发布到</span> 爱爱丸AIAIWAN </p>
</div>
</div>
</div>
</div>
<div class="column-item">
<img class="bigimg" src="http://www.th7.cn/feizhuliu/UploadFiles_2544/201105/2011053110053526.jpg"/>
<div class="intro">
<p>精致的木耳边小高领衬衫文艺范十足，外搭一件撞色菱形格纹针织背心，很有层次感的搭配。再加上一条大摆的高腰短裙，学院风满满，时尚又减龄的穿搭。</p>
<div class="user">
<div class="verticalAlign column-item-2">
<img class="img" src="http://img2.3lian.com/img2009/06/16/024.jpg"/>
</div>
<div class="verticalAlign column-item-10">
<p>爱爱丸AIAIWAN </p>
<p><span>发布到</span> 爱爱丸AIAIWAN </p>
</div>
</div>
</div>
</div>
<div class="column-item">
<img class="bigimg" src="http://d02.res.meilishuo.net/pic/_o/1f/e6/421262820f4b5325a9e26ec05eaa_990_826.jpeg"/>
<div class="intro">
<p>精致的木耳边小高领衬衫文艺范十足，外搭一件撞色菱形格纹针织背心，很有层次感的搭配。再加上一条大摆的高腰短裙，学院风满满，时尚又减龄的穿搭。</p>
<div class="user">
<div class="verticalAlign column-item-2">
<img class="img" src="http://img2.3lian.com/img2009/06/16/024.jpg"/>
</div>
<div class="verticalAlign column-item-10">
<p>爱爱丸AIAIWAN </p>
<p><span>发布到</span> 爱爱丸AIAIWAN </p>
</div>
</div>
</div>
</div>
<div class="column-item">
<img class="bigimg" src="http://img775.ph.126.net/8fHLm-JGKWyOIcfzHZstzQ==/4860791372816804389.jpg"/>
<div class="intro">
<p>精致的木耳边小高领衬衫文艺范十足，外搭一件撞色菱形格纹针织背心，很有层次感的搭配。再加上一条大摆的高腰短裙，学院风满满，时尚又减龄的穿搭。</p>
<div class="user">
<div class="verticalAlign column-item-2">
<img class="img" src="http://img2.3lian.com/img2009/06/16/024.jpg"/>
</div>
<div class="verticalAlign column-item-10">
<p>爱爱丸AIAIWAN </p>
<p><span>发布到</span>爱爱丸AIAIWAN </p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- CSS3的column实现瀑布流效果
- CSS3实现瀑布流效果
- 使用CSS3 and jQuery 实现霓虹灯闪烁效果
- 使用 CSS3 可以实现的五种很酷很炫的效果
- [置顶] HTML5 实现小车动画效果(Canvas/CSS3/JQuery)
- CSS3实现的超酷页面过渡效果
- CSS3实现的超酷页面过渡效果
- CSS3 实现圆角效果
- 使用CSS3可以实现的五种很酷很炫的效果
- 分享一个CSS3和jQuery实现的模糊显示效果 - 帮助你的访问用户更好的阅读内容
- 分享一个CSS3和jQuery实现的模糊显示效果 - 帮助你的访问用户更好的阅读内容
- CSS3 实现滚动字幕效果（即跑马灯）
- 使用 CSS3 可以实现的五种很酷很炫的效果
- 使用Jquery,CSS3实现像GooglePlus那样的圆圈效果
- 用CSS3实现类似苹果桌面的有趣抖动效果
- 一个用 CSS3 样式加上 JS 实现了 alert 和 confirm的效果
- 使用 CSS3 可以实现的五种很酷很炫的效果
- CSS3下的渐变文字效果实现
- 2011年最新使用CSS3实现各种独特悬浮效果的教程
- HTML5 实现小车动画效果(Canvas/CSS3/JQuery)