原生js实现瀑布流！

矫情吗；* 2022-04-24 15:40 283阅读 0赞

**一、分析：**  
1、瀑布流布局被广泛运用于图片展示，但是展示的图片需要宽度相等，而高度可以自适应；  
2、使用js获取图片宽度、获取窗帘宽度，计算一行能容纳的图片个数，然后获取图片的高度，控制从第二行开始的图片先排在上一行中高度最低的下面，以此形成瀑布流的布局；  
3、使用window.onresize，当窗口大小变化的时候重新计算窗口宽度，以重新进行排版；  
4、使用window.onscroll，当滚动滚轮时，判断是否显示到最后一张图片，在这之前会从模拟的数据中读取图片地址，再添加到页面里，使得页面可以一直滚动下去，模拟了百度图片的效果；

**二、代码部分：**

样式部分：
    <style type="text/css">
    		div{
    			width:200px;
    			position: absolute;
    		}
    </style>

内容部分：
    <body id="body">
    </body>

script部分：
    <script type="text/javascript">
    	createDiv();
    	function createDiv(){
    		for (var i = 0; i < 20; i++) {
    			var aDiv = document.createElement("div") //创建div标签；
    			var img = document.createElement("img");
    			aDiv.appendChild(img);
    			// var aDivH = Math.floor(Math.random() * 300 + 50);	//DIV的随机高度;
    			aDiv.style.height = "auto";				//将随机高度赋值给div
    			// aDiv.style.backgroundColor = clr();			//背景色为随机数；
    			img.src = images();
    			img.style.width = "200px";
    			img.style.height = "auto";
    
    			body.appendChild(aDiv);						//将aDiv添加到body中			
    		}
    		divStyle();
    	}	
    
    	function divStyle(){
    		var windowCW = document.documentElement.clientWidth;	//浏览器的可见宽度；
    		var n = Math.floor(windowCW / (200 + 10)); //计算每一行有多少个盒子；
    		var center = (windowCW - n * (200 + 10)) / 2;	//所有盒子左边界的距离；
    		var div = document.getElementsByTagName("div"); //获取div标签
    		var arrH = [];
    		for (var i = 0; i < div.length; i++) {
    			var j = i % n;	//拿到头一排的下标，方便后面保存第一排的高度；
    			if (arrH.length == n) {	//从第二排起开始设置的top 、 left
    				var minH = minIndex(arrH);	//找好最低盒子高度的下标；
    				div[i].style.left = minH * (200 + 10) + center + "px";//因为低的地方新加了一个盒子top值发生变化，所以得累加一个新盒子的height；
    				div[i].style.top = arrH[minH] + 10 + "px";	//给最低盒子重新定义一个新的盒子top值；
    
    				arrH[minH] += div[i].offsetHeight + 10;
    			}else{
    				arrH[j] = div[i].offsetHeight;	//给第一排的div高度保存下来；
    				div[j].style.left = center + j * (200 + 10) + "px";	//第一排div的左边距
    				div[j].style.top = 0 + "px";	//第一排div的上边距；
    			}
    		}
    		var documentH = document.documentElement.scrollHeight || document.body.scrollHeight;
    			if (arrH[minH] < documentH) {
    				createDiv();
    			}
    	};
    	//滚轮事件：
    	window.onscroll = function(){
    		var windowH = document.documentElement.clientHeight;	//可视区窗口高度；
    		var scrollH = document.documentElement.scrollTop || document.body.scrollTop;	//滚动条的上边距；
    		var documentH = document.documentElement.scrollHeight || document.body.scrollHeight;	//滚动条的高度；
    
    		if (windowH + scrollH > documentH - 20) {
    			createDiv();
    		}
    	}
    	//自适应：
    	window.onresize = function(){
    		change();
    	}
    	//找数组中最小元素的下标；
    	function minIndex(arr){
    		var m = 0;
    		for (var i = 0; i < arr.length; i++) {
    			m = Math.min(arr[m],arr[i]) == arr[m] ? m : i;
    		};
    		return m;
    	}
    	//随机颜色
    	function clr(){
    		var arr = ["a","b","c","d","e","f","0","1","2","3","4","5","6","7","8","9"];
    		var color = "#";
    		for (var i = 0; i < 6; i++) {
    			var sui = Math.round(Math.random() * 16 - 1); //获取随机颜色；
    			color += arr[sui];
    		}
    		return color;
    	}
    
    	//随机图
    	function images(){
    		var arr2 = ["images/01.jpg","images/02.jpg","images/03.jpg","images/04.jpg","images/05.jpg","images/06.jpg"];
    		var imgsrc = "";
    		for (var i = 0; i < 1; i++) {
    			var suiImg = Math.round(Math.random() * 5); //获取随机图片
    			imgsrc += arr2[suiImg];
    		}
    		return imgsrc;
    	}
    
    	window.onload = function(){ 
    		divStyle();
    	}
    </script>

**这就实现了瀑布流的一种实现方法，希望可以得到大神的指点！**