原生js实现瀑布流！

最新推荐文章于 2020-10-29 10:35:36 发布

Unicorn-xueya.

最新推荐文章于 2020-10-29 10:35:36 发布

阅读量228

点赞数 1

本文链接：https://blog.csdn.net/xue_smail/article/details/89675885

版权

一、分析：
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>

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

Unicorn-xueya.

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
原生js实现瀑布流！

一、分析：1、瀑布流布局被广泛运用于图片展示，但是展示的图片需要宽度相等，而高度可以自适应；2、使用js获取图片宽度、获取窗帘宽度，计算一行能容纳的图片个数，然后获取图片的高度，控制从第二行开始的图片先排在上一行中高度最低的下面，以此形成瀑布流的布局；3、使用window.onresize，当窗口大小变化的时候重新计算窗口宽度，以重新进行排版；4、使用window.onscroll，当滚动...
复制链接

扫一扫