原创javascript原生实现图片瀑布流

Posted 2020-07-12 东渐

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原创javascript原生实现图片瀑布流相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>瀑布流</title>
	<style>
		*{
			padding: 0;
			margin: 0;
		}
		#main{
			position: relative;
		}
		.box{
			float: left;
			padding: 15px 0 0 15px;
		}
		.pic{
			padding:10px;
			border: 1px solid #666;
			border-radius: 3px;
			box-shadow: 0 0  3px #777;
		}
		.pic img{
			height: auto;
			width: 150px;
		}

	</style>
</head>
<body>
	<div id="main">
		<div class="box">
			<div class="pic"><img src="img/1.jpg" ></div>
		</div>
		<div class="box">
			<div class="pic"><img src="img/2.jpg" ></div>
		</div>
		<div class="box">
			<div class="pic"><img src="img/3.jpg" ></div>
		</div>
		<div class="box">
			<div class="pic"><img src="img/4.jpg" ></div>
		</div>
		<div class="box">
			<div class="pic"><img src="img/5.jpg" ></div>
		</div>
		<div class="box">
			<div class="pic"><img src="img/6.jpg" ></div>
		</div>
		<div class="box">
			<div class="pic"><img src="img/7.jpg" ></div>
		</div>
		<div class="box">
			<div class="pic"><img src="img/8.jpg" ></div>
		</div>
		<div class="box">
			<div class="pic"><img src="img/9.jpg" ></div>
		</div>
		<div class="box">
			<div class="pic"><img src="img/10.jpg" ></div>
		</div>
		<div class="box">
			<div class="pic"><img src="img/11.jpg" ></div>
		</div>
		<div class="box">
			<div class="pic"><img src="img/12.jpg" ></div>
		</div>
		<div class="box">
			<div class="pic"><img src="img/13.jpg" ></div>
		</div>
		<div class="box">
			<div class="pic"><img src="img/14.jpg" ></div>
		</div>
		<div class="box">
			<div class="pic"><img src="img/15.jpg" ></div>
		</div>
		<div class="box">
			<div class="pic"><img src="img/16.jpg" ></div>
		</div>
		<div class="box">
			<div class="pic"><img src="img/17.jpg" ></div>
		</div>
		<div class="box">
			<div class="pic"><img src="img/18.jpg" ></div>
		</div>
		<div class="box">
			<div class="pic"><img src="img/19.jpg" ></div>
		</div>
		<div class="box">
			<div class="pic"><img src="img/20.jpg" ></div>
		</div>
		<div class="box">
			<div class="pic"><img src="img/21.jpg" ></div>
		</div>
		<div class="box">
			<div class="pic"><img src="img/22.jpg" ></div>
		</div>
		<div class="box">
			<div class="pic"><img src="img/23.jpg" ></div>
		</div>
		<div class="box">
			<div class="pic"><img src="img/24.jpg" ></div>
		</div>
		<div class="box">
			<div class="pic"><img src="img/25.jpg" ></div>
		</div>
		<div class="box">
			<div class="pic"><img src="img/26.jpg" ></div>
		</div>
		<div class="box">
			<div class="pic"><img src="img/27.jpg" ></div>
		</div>
		<div class="box">
			<div class="pic"><img src="img/28.jpg" ></div>
		</div>
		<div class="box">
			<div class="pic"><img src="img/30.jpg" ></div>
		</div>
		<div class="box">
			<div class="pic"><img src="img/31.jpg" ></div>
		</div>
	</div>
	<script>
		window.onload=function(){
			waterfall(‘main‘,‘box‘);
		}

		function waterfall(id,clsN){
			var oid=document.getElementById(id);
			var cls=getByClassName(oid,clsN);
			var boxW=cls[0].offsetWidth;
			var num=Math.floor(document.documentElement.clientWidth/boxW);
			oid.style.cssText="width:"+num*boxW+"px ; margin:0 auto;";
			var ar=[];
			for(var i=0; i<cls.length;i++){
				if(i<num){
					ar[i]=cls[i].offsetHeight;
				}else{
					var minH=Math.min.apply(null,ar);
					var minIndex=getminHIndex(ar,minH);
					cls[i].style.position="absolute";
					cls[i].style.top=minH+"px";
					cls[i].style.left=cls[minIndex].offsetLeft+"px";
					ar[minIndex]+=cls[i].offsetHeight;
				}
			}

		}
		function getminHIndex(arr,minH){
    		for(var i in arr){
       			 if(arr[i]==minH){
            		return i;
       			 }
    		}
		}
　　　　　　
		function getByClassName(parent,classname){
			var arr=new Array();
			var oparent=parent.getElementsByTagName(‘*‘);
			for(var i=0;i<oparent.length;i++){
				if(oparent[i].className==classname){
					arr.push(oparent[i]);
				}
			}
			return arr;
		}

		
	</script>
</body>
</html>

以上是关于原创javascript原生实现图片瀑布流的主要内容，如果未能解决你的问题，请参考以下文章

原生JavaScript实现图片瀑布流效果，可更改配置参数带完整版解析代码[waterFall.js]

一步步教你js原生瀑布流效果实现

javascript瀑布流

Javascript Demo图片瀑布流实现

原生JS实现瀑布流布局