纯css 实现瀑布流效果

最新推荐文章于 2024-07-10 13:54:40 发布

Young_Gao

最新推荐文章于 2024-07-10 13:54:40 发布

阅读量1.3k

点赞数

分类专栏： js+html 文章标签： css 瀑布流 html 瀑布流瀑布流

本文链接：https://blog.csdn.net/Young_Gao/article/details/93508449

版权

js+html 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

原理是 css 的 column 属性，话不多说直接上代码

<html>
	<head>
		<link rel="stylesheet" type="text/css" href="css/main.css">
		<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>

		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}

			#main {
				-webkit-column-count: 2;
				-moz-column-count: 2;
				column-count: 2;
				-moz-column-gap: 20px;
				-webkit-column-gap: 20px;
				column-gap: 20px;
				padding: 10px;
			}

			.box {
				padding: 15px;
				border: solid 2px #eeeeee;
				border-radius: 4px;
				margin-bottom: 15px;
				cursor: pointer;
			}

			.box img {
				width: 100%;
			}
		</style>
	</head>
	<body>
		<div id="main">
			<div class="box">
				<div class="pic">
					<img src="">
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="">
				</div>
			</div>
			<!-- 这里省略多个class为box的div-->
			<div class="box">
				<div class="pic">
					<img src="">
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="">
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="">
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="">
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="">
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="">
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="">
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var width = 300,
			height = 300;
		$('.box img').each(function() {
			// 随机图片的高宽，如果大小一样，就没必要用瀑布流了
			width = Math.floor(Math.random() * 100) + 300;
			height = Math.floor(Math.random() * 500) + 300;
			$(this).attr('src', 'http://placekitten.com/' + height + '/' + width);
		});
	</script>
</html>

参照：https://www.cnblogs.com/CraryPrimitiveMan/p/3777033.html

Young_Gao

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
纯css 实现瀑布流效果

原理是 css 的 column 属性，话不多说直接上代码<html> <head> <link rel="stylesheet" type="text/css" href="css/main.css"> <script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf...
复制链接

扫一扫

专栏目录