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

男娘i 2023-03-04 05:25 23阅读 0赞

## 实现思路 ##

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

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

## 实现效果展示 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BpZ19waWczMg_size_16_color_FFFFFF_t_70]

## 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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BpZ19waWczMg_size_16_color_FFFFFF_t_70]: /images/20230208/d3f0430676fb4ff2913e7aab68980b87.png

发表评论取消回复

表情：

评论列表（有 0 条评论，23人围观）

还没有评论，来说两句吧...

相关阅读

相关原生js实现瀑布流之无限加载

布流布局在我们现在的前端页面中经常会用的到，它可以有效的降低页面的复杂度，节省很多的空间，对于整个页面不需要太多的操作，只需要下拉就可以浏览用户需要看到的数据；并且，在当...

我会带着你远行/ 2024年04月18日 23:24/ 0 赞/ 72 阅读

相关 jQuery+css实现瀑布流布局(无限加载)

文件目录： ![在这里插入图片描述][20200309130740816.png] images：这个文件夹放了需要的照片，名字都按照0，1,2，3…排列，便于

- 日理万妓/ 2023年07月12日 14:44/ 0 赞/ 169 阅读

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

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

男娘i/ 2023年03月04日 05:25/ 0 赞/ 24 阅读

相关 uniapp实现瀑布流懒加载实现和无限上拉加载更多

效果图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3

ゞ浴缸里的玫瑰/ 2023年01月01日 03:49/ 0 赞/ 419 阅读

相关瀑布流布局和滚动加载更多

...html <div id="box"> <div class="item"><img src="./images

心已赠人/ 2022年09月16日 05:48/ 0 赞/ 312 阅读

相关 JavaScript、jQuery、css3实现瀑布流加载

实现的最终效果如下： ![Center][] 在实现的过程中用到的有： 1.css设置边框为圆角： border-radius: 5px;

落日映苍穹つ/ 2022年08月20日 14:24/ 0 赞/ 231 阅读

相关 JavaScript实现无限瀑布流

![70][] <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

超、凢脫俗/ 2022年05月17日 11:14/ 0 赞/ 300 阅读

相关原生JS实现无限滚动瀑布流布局

API HTMLElement.offsetWidth 是一个只读属性，返回一个元素的布局宽度。一个典型的（译者注：各浏览器的offsetWidth可能有所不同）offs

太过爱你忘了你带给我的痛/ 2022年02月27日 12:52/ 0 赞/ 339 阅读

相关 uni-App手撸瀑布流+列表无限加载

目录简介瀑布流+列表无限加载：瀑布流列表无限加载实现逻辑：主要知识点：底部触发加载更多

系统管理员/ 2022年02月03日 15:45/ 0 赞/ 304 阅读

相关无线滚动瀑布流(内容无限加载)

解决问题：当图片最后一张顶部到整个div顶部不包括边框的距离大于浏览器不包括上窗口的高度加上滑动滚动距离时，加载后面的图片浏览器不包括上窗口高度:document.d

ゞ浴缸里的玫瑰/ 2021年07月24日 15:38/ 0 赞/ 467 阅读