1.使用JQuery实现加载更多功能

最新推荐文章于 2022-05-27 00:28:46 发布

CodingLemon.

最新推荐文章于 2022-05-27 00:28:46 发布

阅读量569

点赞数

分类专栏： Web前端文章标签： js javascript css jquery

本文链接：https://blog.csdn.net/zry15671554200/article/details/108563542

版权

Web前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

博客链接： Coding Lemon’s blog Java知识、面试总结、LeetCode题目解析等持续更新

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
        </style>
    </head>
    <body>
    <div class="content">1</div>
    <div class="content">2</div>
    <div class="content">3</div>
    <div class="content">4</div>
    <button class="loadingMore">加载更多</button>
    
　<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript">
    	
    $(function(){
		
		var autoScrollSign = 0;
		
		//每次滚动添加3页内容
    	$(document).scroll(function() {
		    var scrollH = $(document).scrollTop();  //滚动高度
		    var contentH = $(document).height();  //内容高度
			
			//如果滚动条与内容高度相差1200px则添加页面内容
			if((contentH-scrollH) < 1200 && autoScrollSign<3){
				inputNextPage(3);
				autoScrollSign++;
			}
		 
		});
    	
    	//点击加载更多则加载一页内容 。
    	$(".loadingMore").click(function(){
    		var classArray = document.getElementsByClassName("content");
    		var length = classArray.length;
    		var nowScrollTop = $(document).scrollTop();
    		inputNextPage(1);
    		$(document).scrollTop(nowScrollTop);
    		autoScrollSign = 0;
    	});
    	
    	//该参数显示当前的内容数目
    	var divSign = 5;
    	
    	//添加内容方法，pageNum可以设置每次添加的页数，其中for循环中的4表示每次添加4条内容，可以自定义修改
    	function inputNextPage(pageNum){
    		for (var i = 0; i < pageNum*4; i++) {
    			var classArray = document.getElementsByClassName("content");
    			var lastDom = classArray[classArray.length-1];
    			var newDom = document.createElement("div");
    			newDom.className="content";
    			newDom.innerHTML = divSign++;
    			insertAfter(newDom,lastDom);
    		}
    	}
    	
    	function insertAfter(newElement, targentElement) {
	        var parent = targentElement.parentNode;
	        if (parent.lastChild == targentElement) {
	            parent.appendChild(newElement);
	        } else {
	            parent.insertBefore(newElement, targentElement.nextSibling);
	        }
	    }
    });
    </script>
    <style>
    	.content{
    		width: 90%;
    		margin:5%;
    		height: 300px;
    		background: red;
    	}
    </style>
    </body>
</html>

展示效果如图：
在这里插入图片描述

其他需要修改的地方主要在inputNextPage()这个方法中，将从后台请求到的页面数据在这个方法中添加。另外可能暂没有做兼容性测试，在IE中可能会有问题，兼容性应该主要在获取内容和滚动条高度这一部分，后续如果有空也许会对IE兼容。(目前已对IE兼容)

CodingLemon.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
1.使用JQuery实现加载更多功能

代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style> </style> </head> <body> <div class="content">1</div&gt
复制链接

扫一扫