免费个人博客模板-专注前端行业与圈内动态-分享最具价值内容

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

发布:鹏仔先生2018-11-30 0:14分类: JavaScript 标签: 效果 javascript


共享博客 js瀑布流

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

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


CSS代码
<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>


HTML代码
<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>


JS代码
<script type="text/javascript">
	let box = document.getElementById('box');
	let panel = Array.from(box.children);
	// 声明panel的宽度
	const PANEL_WIDTH = panel[0].offsetWidth;
	// 声明列数
	let totalColumn = Math.trunc(document.documentElement.clientWidth/PANEL_WIDTH);
	// 就算box的宽度
	box.style.width=totalColumn*PANEL_WIDTH+'PX';
	// 声明图片的宽度
	const IMG_WIDTH =220;
	// 记录每列的高度
	let columnHeight = [];
	panel.forEach(function(v, k){
		if(k< totalColumn){
			v.style.left=k*PANEL_WIDTH+'PX';
			v.style.top = 0;
			// 记录列的高度
			columnHeight.push(v.offsetHeight);
		}else{
			//剩余的图片找最低的列高度
			let minHeight = Math.min(...columnHeight);
			// 查找最小值在数组中的小标
			let minHeightKey = columnHeight.indexOf(minHeight);
			// 指定位置
			v.style.left=minHeightKey*PANEL_WIDTH+'px';
			v.style.top = minHeight+'px';
			// 更新列的高度
			columnHeight[minHeightKey]=minHeight+v.offsetHeight;
                }
	})
</script>

百度云盘下载 pan.baidu.com/s/1OM1TdAeoy1GC85Jx1_SmXA


温馨提示如有转载或引用以上内容之必要,敬请将本文链接作为出处标注,谢谢合作!

已有 0/853 人参与

微信扫码关注鹏仔哥微信