css3实现瀑布流效果

于 2017-02-09 16:42:38 发布
阅读量509 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： css3 文章标签： css3 瀑布流效果
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_36341800/article/details/54948879
这个示例展示了如何利用CSS3的column-count和column-gap属性实现一个简单的瀑布流布局。内容包括多列图片展示，图片下方附带描述，以及用户信息。这种布局常见于图像分享或博客网站，为用户提供美观的视觉体验。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!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>

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值