陌涛小站

使用原生js来实现瀑布流效果

—

由

陌涛
于

瀑布流网页页面效果目前是一种很常见的布局，下面使用原生js实现一个瀑布流效果，附代码如下

复制代码，图片路径自己修改即可

<style type="text/css">
	*{
		margin:0;
		padding:0;
	}
	img{
		vertical-align: bottom;
	}
	#box{
       	        position: relative;
                margin:0 auto;
                width: 780px;
	}
	#box .panel{
		position: absolute;

	}
	#box .panel img{
		margin:10px;
		padding:10px;
		width: 220px;
		background: #fff;
		border-radius: 5px;
		box-shadow: 0 0 8px #ccc;
	}
</style>
<body>
	<div id="box">
		<div class="panel"><img src="img/1.jpg"></div>
		<div class="panel"><img src="img/2.jpg"></div>
		<div class="panel"><img src="img/3.jpg"></div>
		<div class="panel"><img src="img/4.jpg"></div>
		<div class="panel"><img src="img/5.jpg"></div>
		<div class="panel"><img src="img/6.jpg"></div>
		<div class="panel"><img src="img/7.jpg"></div>
		<div class="panel"><img src="img/8.jpg"></div>
		<div class="panel"><img src="img/9.jpg"></div>
		<div class="panel"><img src="img/10.jpg"></div>
		<div class="panel"><img src="img/11.jpg"></div>
		<div class="panel"><img src="img/12.jpg"></div>
		<div class="panel"><img src="img/13.jpg"></div>
		<div class="panel"><img src="img/14.jpg"></div>
		<div class="panel"><img src="img/15.jpg"></div>
		<div class="panel"><img src="img/16.jpg"></div>
		<div class="panel"><img src="img/17.jpg"></div>
		<div class="panel"><img src="img/18.jpg"></div>
		<div class="panel"><img src="img/19.jpg"></div>
		<div class="panel"><img src="img/20.jpg"></div>
	</div>
</body>

提取码：8htq

[button url="https://pan.baidu.com/s/1g6UwxNY1palm1vHzpTUAdA" types="down"]百度网盘[/button]

评论

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据。