PC端瀑布流无限加载效果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>瀑布流</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		#box {
			position: relative;
			margin: 0 auto;
		}
		#box .panel {
			position: absolute;
		}
		#box img {
			margin: 10px;
			padding: 10px;
			width: 220px;
			background: #fff;
			box-shadow: 0 0 8px #ccc;
		}
	</style>
</head>
<body>
	<div id="box">
		<div class="panel"><img src="images/1.jpg"></div>
		<div class="panel"><img src="images/2.jpg"></div>
		<div class="panel"><img src="images/3.jpg"></div>
		<div class="panel"><img src="images/4.jpg"></div>
		<div class="panel"><img src="images/5.jpg"></div>
		<div class="panel"><img src="images/6.jpg"></div>
		<div class="panel"><img src="images/7.jpg"></div>
		<div class="panel"><img src="images/8.jpg"></div>
		<div class="panel"><img src="images/9.jpg"></div>
		<div class="panel"><img src="images/10.jpg"></div>
		<div class="panel"><img src="images/11.jpg"></div>
		<div class="panel"><img src="images/12.jpg"></div>
		<div class="panel"><img src="images/13.jpg"></div>
		<div class="panel"><img src="images/14.jpg"></div>
		<div class="panel"><img src="images/15.jpg"></div>
		<div class="panel"><img src="images/16.jpg"></div>
		<div class="panel"><img src="images/17.jpg"></div>
		<div class="panel"><img src="images/18.jpg"></div>
		<div class="panel"><img src="images/19.jpg"></div>
		<div class="panel"><img src="images/20.jpg"></div>
	</div>

	<script src="data.js"></script>
	<script src="index.js"></script>
</body>
</html>

建两个js文件分别为data.js和index.js,这个根据个人需求可以更改

index.js


window.onload = function () {
	let oBox   	   = document.getElementById('box');
	let aPanel 	   = Array.from(oBox.children);
	const iPanelW  = aPanel[0].offsetWidth; // 记录列的宽度
	const iImgW    = 220;


	// 计算最多容纳列数
	let iWinW   = document.documentElement.clientWidth;
	let iWinH   = document.documentElement.clientHeight;
	let iMaxCol = Math.floor(iWinW / iPanelW);

	// 指定box的宽度
	oBox.style.width = iMaxCol * iPanelW + 'px';


	// 记录每一列的高度
	let aColH = [];

	// 遍历指定位置
	aPanel.forEach((v, k) => {
		// 如果当前panel为第一排,则top为0
		if(k < iMaxCol) {
			v.style.top = 0;
			v.style.left = k * iPanelW + 'px';

			// 记录每一列的高度
			aColH.push(v.offsetHeight);
		} else {
			// 寻找最矮列的高度值和下标
			var iMinH = Math.min(...aColH);
			var iMinK = aColH.indexOf(iMinH);


			// 指定位置
			v.style.left = iMinK * iPanelW + 'px';
			v.style.top  = iMinH + 'px';

			// 更新列的高度
			aColH[iMinK] += v.offsetHeight;
		}
	});


	// 滚动加载新的数据
	var loadOK = true; // 可以加载新的数据
	window.onscroll = function () {
		let iScrollT = document.body.scrollTop || document.documentElement.scrollTop;
		let oLastPanel = aPanel[aPanel.length - 1];
		if(loadOK && (iWinH + iScrollT > oLastPanel.offsetTop + oLastPanel.offsetHeight / 2)) {
			loadOK = false;
			// 加载新的数据
			data.forEach(v => {
				let oNewPanel = document.createElement('div');
				oNewPanel.className = 'panel';

				// 创建IMG
				let oNewImg = document.createElement('img');
				oNewImg.src = v.url;

				// 计算图片等比缩放后实际的高度
				// 公式:iActualW / iActualH = iScaleW / iScaleH
				let iImgH = v.height * iImgW / v.width;
				oNewImg.style.height = iMinH + 'px';

				oNewPanel.appendChild(oNewImg);
				oBox.appendChild(oNewPanel);

				// 寻找最矮列的高度值和下标
				var iMinH = Math.min(...aColH);
				var iMinK = aColH.indexOf(iMinH);

				oNewPanel.style.left = iMinK * iPanelW + 'px';
				oNewPanel.style.top = iMinH + 'px';

				// 更新列的高度
				aColH[iMinK] += oNewPanel.offsetHeight;
			});

			// 更新最后的列
			aPanel = Array.from(oBox.children);

			// 打开开关
			loadOK = true;
		} 
	};

	window.onresize = function () {
		// 更新视窗的宽度和高度
		iWinW   = document.documentElement.clientWidth;
		iWinH   = document.documentElement.clientHeight;

		// 更新列数
		iMaxCol = Math.floor(iWinW / iPanelW);

		// 更新box的宽度
		oBox.style.width = iMaxCol * iPanelW + 'px';

		// 重新排版
		aColH = [];

		// 遍历指定位置
		aPanel.forEach((v, k) => {
			// 如果当前panel为第一排,则top为0
			if(k < iMaxCol) {
				v.style.top = 0;
				v.style.left = k * iPanelW + 'px';

				// 记录每一列的高度
				aColH.push(v.offsetHeight);
			} else {
				// 寻找最矮列的高度值和下标
				var iMinH = Math.min(...aColH);
				var iMinK = aColH.indexOf(iMinH);

				// 指定位置
				v.style.left = iMinK * iPanelW + 'px';
				v.style.top  = iMinH + 'px';

				// 更新列的高度
				aColH[iMinK] += v.offsetHeight;
			}
		});
	};
};

data.js

const data = [
	{
		url: 'images/1.jpg',
		width: 432,
		height: 300,
	},
	{
		url: 'images/2.jpg',
		width: 681,
		height: 966,
	},
	{
		url: 'images/3.jpg',
		width: 480,
		height: 300,
	},
	{
		url: 'images/4.jpg',
		width: 480,
		height: 300,
	},
	{
		url: 'images/5.jpg',
		width: 683,
		height: 1024,
	},
	{
		url: 'images/6.jpg',
		width: 682,
		height: 1024,
	},
	{
		url: 'images/7.jpg',
		width: 1000,
		height: 1500,
	},{
		url: 'images/8.jpg',
		width: 677,
		height: 966,
	},{
		url: 'images/9.jpg',
		width: 667,
		height: 1000,
	},{
		url: 'images/10.jpg',
		width: 400,
		height: 300,
	}
];

data.js中是模拟的数据,url是图标的地址,width和height是图片本身的大小

可根据需求模拟自己想要的数据

©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值