瀑布流，实现页面滚动到位置再加载

最新推荐文章于 2023-02-27 17:09:52 发布

werch

最新推荐文章于 2023-02-27 17:09:52 发布

阅读量269

点赞数

分类专栏： js js 小案例

本文链接：https://blog.csdn.net/weixin_42666092/article/details/115461977

版权

js 同时被 2 个专栏收录

54 篇文章 1 订阅

订阅专栏

js 小案例

23 篇文章 0 订阅

订阅专栏

本文展示了一个使用JavaScript实现的瀑布流布局示例，通过计算和比较各个浮动元素的高度，动态插入内容。同时，实现了滚动到底部时预加载更多内容的功能，以优化用户体验。代码中涉及到了DOM操作、事件监听以及随机颜色和高度生成，适合前端开发者学习。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>瀑布流</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		ul,
		li {
			list-style-type: none;
		}

		.wp {

			overflow: hidden;

		}

		ul {
			width: calc(25% - 22px);
			border: 1px solid red;
			margin: 0 10px;
			float: left;
		}

		ul li {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 50px;
			color: #333;
			margin-bottom: 20px;
		}
	</style>
</head>

<body>
	<div class="wp">
		<ul></ul>
		<ul></ul>
		<ul></ul>
		<ul></ul>
	</div>
</body>

</html>
<script type="text/javascript">
	var ul = document.querySelectorAll('ul');
	// 随机数
	function rand(m, n) {
		return Math.floor(Math.random() * (n - m + 1) + m);
	}
	// 随机颜色
	function randCol() {
		var r = rand(0, 255);
		var g = rand(0, 255);
		var b = rand(0, 255);
		return `rgb(${r},${g},${b})`;
	}

	// 创建li函数
	function createLi(len) {
		for (i = 0; i < len; i++) {
			var newLi = document.createElement('li');
			// var newLi = new Li();
			newLi.style.height = rand(60, 200) + 'px';
			newLi.style.background = randCol();
			newLi.innerHTML = i + 1;
			//创建一个数组，用来存放4个ul的高度
			var arrH = [];
			for (var k = 0; k < ul.length; k++) {
				arrH.push(ul[k].offsetHeight);

			}
			// 获取数组中的最小值
			var minH = Math.min.apply(null, arrH)
			// ul高度最小的下标
			var index = arrH.indexOf(minH);
			ul[index].appendChild(newLi);
		}

	}
	createLi(30);
	//实现预加载（滚动条到页面底部后，继续执行添加瀑布流）
    //当四个ul的最大高度等于起始滚动条高度加上可见高度后继续加载新的内容
    //createLi(30);

	//获取浏览器的滚动距离
	function scrollHeight() {
		return document.documentElement.scrollTop;
	}
	//获取整个屏幕的可视高度
	function screenHeight() {
		return document.documentElement.clientHeight;
	}
	window.onscroll = function () {
		var arrH = [];
		for (var k = 0; k < ul.length; k++) {
			arrH.push(ul[k].offsetHeight);

		}
		var maxH = Math.max.apply(null, arrH);
		if (maxH == scrollHeight() + screenHeight()) {
			createLi(30);
		}
	}
</script>