JavaScript实现无限滚动加载瀑布流

最新推荐文章于 2024-07-16 17:26:59 发布

念你那丝微笑

最新推荐文章于 2024-07-16 17:26:59 发布

阅读量1.3k

点赞数

分类专栏： JavaScript实用小功能文章标签： javascript html

本文链接：https://blog.csdn.net/pig_pig32/article/details/107728958

版权

JavaScript实用小功能专栏收录该内容

6 篇文章 4 订阅

订阅专栏

实现思路

JS无限瀑布流的实现，先定义两个div，通过css把父div设置为相对定位，子div设置为绝对定位（子绝父相），通过js改变div的相对定位，来实现瀑布流的加载。

在js实现中：
1 获取到.itemBox 宽度
2 获取到.item 宽度
3 求出列数
4 求出间距
5 调用waterFull()，getMin(arr)方法实现瀑布流布局：
6 调用waterFull()方法实现滚动页面时加载数据

实现效果展示

在这里插入图片描述

html+CSS代码

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		 <meta http-equiv="X-UA-Compatible" content="ie=edge">
		 <title>js实现瀑布流</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.itemBox{
				width: 1050px;
				margin: 0 auto;
				position: relative;
			}
			.item{
				border: 1px solid #ccc;
				padding: 4px;
				position: absolute;
				width:192px;
			}
			.item img{
				width: 100%;
			}
		</style>
	
	</head>
	<body>
		<div class="itemBox">
			<div class="item">
				<img src="images/P_000.jpg" >
			</div>
			<div class="item">
				<img src="img/ban2.jpg" >
			</div>
			<div class="item">
				<img src="img/ban3.jpg" >
			</div>
			<div class="item">
				<img src="images/P_003.jpg" >
			</div>
			<div class="item">
				<img src="images/P_004.jpg" >
			</div>
			<div class="item">
				<img src="images/P_005.jpg" >
			</div>
			<div class="item">
				<img src="images/P_006.jpg" >
			</div>
			<div class="item">
				<img src="images/P_007.jpg" >
			</div>
			<div class="item">
				<img src="images/P_008.jpg" >
			</div>
			<div class="item">
				<img src="images/P_009.jpg" >
			</div>
			<div class="item">
				<img src="images/P_010.jpg" >
			</div>
			<div class="item">
				<img src="images/P_010.jpg" >
			</div>
			<div class="item">
				<img src="images/P_001.jpg" >
			</div>
			<div class="item">
				<img src="images/P_005.jpg" >
			</div>
			<div class="item">
				<img src="images/P_006.jpg" >
			</div>
		</div>
		
	</body>

<script>
	
	    window.onload = function () {
	        // 获取到相关元素
	        var itemBox = document.getElementsByClassName('itemBox')[0];
	        var items = document.getElementsByClassName('item');
	        // 1 获取到.itemBox 宽度
	        var itemBoxW = itemBox.offsetWidth;
	        // 2 获取到.item 宽度
	        var itemW = items[0].offsetWidth;
	        // 3 求出列数
	        var column = parseInt(itemBoxW / itemW);
	        // 4 求出间距
	        var distence = (itemBoxW - itemW * column) / (column - 1);
	        console.log(distence);
	        // 5 实现瀑布流布局的方法
	        // 定义一个存储每列高度的容器
	        var arr = [];
	        waterFull();
	        // 6 滚动页面时加载数据
	        window.onscroll = function () {
	            if (window.pageYOffset + window.innerHeight > getMin(arr).minV) {
	                var json = [
	                    { "src": "./images/P_000.jpg" },
	                    { "src": "./images/P_001.jpg" },
	                    { "src": "./images/P_002.jpg" },
	                    { "src": "./images/P_003.jpg" },
	                    { "src": "./images/P_004.jpg" },
	                    { "src": "./images/P_005.jpg" },
	                    { "src": "./images/P_006.jpg" },
	                    { "src": "./images/P_007.jpg" },
	                    { "src": "./images/P_008.jpg" },
	                    { "src": "./images/P_009.jpg" },
	                    { "src": "./images/P_010.jpg" }
	                ];
	                for (var i = 0; i < json.length; i++) {
	                    var div = document.createElement('div');
	                    div.className = 'item';
	                    var img = document.createElement('img');;
	                    img.src = json[i].src;
	                    div.appendChild(img);
	                    itemBox.appendChild(div);
	                }
	                waterFull();
	
	
	            }
	        }
	        // 实现瀑布流布局的方法
	        function waterFull() {
	            for (var i = 0; i < items.length; i++) {
	                if (i < column) {
	                    items[i].style.left = (itemW + distence) * i + 'px';
	                    arr[i] = items[i].offsetHeight;
	                    // console.log(arr);
	                } 
					else {
	                    var minV = getMin(arr).minV;
	                    var minI = getMin(arr).minI;
	                    items[i].style.left = (itemW + distence) * minI + 'px';
	                    items[i].style.top = minV + distence + 'px';
	                    arr[minI] = minV + distence + items[i].offsetHeight;
	
	                }
	
	            }
	        }
	
	        // 获取数组的最小值以及索引
	        function getMin(arr) {
	            var obj = {};
	            obj.minV = arr[0];
	            obj.minI = 0;
	            for (var i = 1; i < arr.length; i++) {
	                if (obj.minV > arr[i]) {
	                    obj.minV = arr[i];
	                    obj.minI = i;
	                }
	            }
	            return obj;
	        }
	
	    }
	</script>