jquery列表点击加载更多

最新推荐文章于 2024-08-01 16:02:06 发布
最新推荐文章于 2024-08-01 16:02:06 发布
阅读量3.3k 收藏 8
点赞数 1
分类专栏： div+css 文章标签： javascript jquery js

jquery列表点击加载更多，可点击多次

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>懒人原生点击按钮加载更多(懒加载，每次加载N个)</title>
	<style>
	*{margin: 0;padding:0;list-style: none;}
	body{background: #333;font-size: 14px;font-family:"微软雅黑"}
	a{color: #333;text-decoration: none;}
	.hidden{ display: none;}
	.lanren{width: 800px;height: auto;margin:0 auto;overflow: hidden;text-align: left;background:#fff;padding:5px;}
	.lanren ul.list{overflow: hidden;}
	.lanren ul.list li{width: 150px;height: 150px;margin:5px;float: left;overflow: hidden;}
	.lanren ul.list li img{width: 100%;height: 100%;}
	.lanren ul.list p{text-align: center;padding: 10px;}
	.lanren .more{overflow: hidden;padding:10px;text-align: center;}
	.lanren .more a{display: block;width: 80px;padding:8px 0;color:#fff;margin:0 auto;background:#333;text-align:center;border-radius:3px;}
	.lanren .more a:hover{text-decoration: none;background: red;color: #fff;}
	</style>
</head>
<body>
<div style="margin:auto;width:830px;">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 详情页banner -->
<ins class="adsbygoogle"
     style="display:inline-block;width:830px;height:120px"
     data-ad-client="ca-pub-4078329886972765"
     data-ad-slot="4189420132"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>	<!--代码部分begin-->
	<div class="lanren">
		<div class="hidden">
			<li><img src="images/1px.gif" realSrc="images/lanren01.jpg" width="150" height="150" /></li>
			<li><img src="images/1px.gif" realSrc="images/lanren02.jpg" width="150" height="150" /></li>
			<li><img src="images/1px.gif" realSrc="images/lanren03.jpg" width="150" height="150" /></li>
			<li><img src="images/1px.gif" realSrc="images/lanren04.jpg" width="150" height="150" /></li>
			<li><img src="images/1px.gif" realSrc="images/lanren05.jpg" width="150" height="150" /></li>
			<li><img src="images/1px.gif" realSrc="images/lanren06.jpg" width="150" height="150" /></li>
			<li><img src="images/1px.gif" realSrc="images/lanren07.jpg" width="150" height="150" /></li>
			<li><img src="images/1px.gif" realSrc="images/lanren08.jpg" width="150" height="150" /></li>
			<li><img src="images/1px.gif" realSrc="images/lanren09.jpg" width="150" height="150" /></li>
			<li><img src="images/1px.gif" realSrc="images/lanren10.jpg" width="150" height="150" /></li>
			<li><img src="images/1px.gif" realSrc="images/lanren11.jpg" width="150" height="150" /></li>
			<li><img src="images/1px.gif" realSrc="images/lanren12.jpg" width="150" height="150" /></li>
			<li><img src="images/1px.gif" realSrc="images/lanren13.jpg" width="150" height="150" /></li>
			<li><img src="images/1px.gif" realSrc="images/lanren14.jpg" width="150" height="150" /></li>
			<li><img src="images/1px.gif" realSrc="images/lanren15.jpg" width="150" height="150" /></li>
			<li><img src="images/1px.gif" realSrc="images/lanren16.jpg" width="150" height="150" /></li>
			<li><img src="images/1px.gif" realSrc="images/lanren17.jpg" width="150" height="150" /></li>
			<li><img src="images/1px.gif" realSrc="images/lanren18.jpg" width="150" height="150" /></li>
			<li><img src="images/1px.gif" realSrc="images/lanren19.jpg" width="150" height="150" /></li>
			<li><img src="images/1px.gif" realSrc="images/lanren20.jpg" width="150" height="150" /></li>
			<li><img src="images/1px.gif" realSrc="images/lanren21.jpg" width="150" height="150" /></li>
			<li><img src="images/1px.gif" realSrc="images/lanren22.jpg" width="150" height="150" /></li>
			<li><img src="images/1px.gif" realSrc="images/lanren23.jpg" width="150" height="150" /></li>
			<li><img src="images/1px.gif" realSrc="images/lanren24.jpg" width="150" height="150" /></li>
			<li><img src="images/1px.gif" realSrc="images/lanren25.jpg" width="150" height="150" /></li>
			<li><img src="images/1px.gif" realSrc="images/lanren26.jpg" width="150" height="150" /></li>
			<li><img src="images/1px.gif" realSrc="images/lanren27.jpg" width="150" height="150" /></li>
			<li><img src="images/1px.gif" realSrc="images/lanren28.jpg" width="150" height="150" /></li>
			<li><img src="images/1px.gif" realSrc="images/lanren29.jpg" width="150" height="150" /></li>
			<li><img src="images/1px.gif" realSrc="images/lanren30.jpg" width="150" height="150" /></li>
			<li><img src="images/1px.gif" realSrc="images/lanren31.jpg" width="150" height="150" /></li>
			<li><img src="images/1px.gif" realSrc="images/lanren32.jpg" width="150" height="150" /></li>
			<li><img src="images/1px.gif" realSrc="images/lanren33.jpg" width="150" height="150" /></li>
			<li><img src="images/1px.gif" realSrc="images/lanren34.jpg" width="150" height="150" /></li>
			<li><img src="images/1px.gif" realSrc="images/lanren35.jpg" width="150" height="150" /></li>
			<li><img src="images/1px.gif" realSrc="images/lanren36.jpg" width="150" height="150" /></li>
			<li><img src="images/1px.gif" realSrc="images/lanren37.jpg" width="150" height="150" /></li>
			<li><img src="images/1px.gif" realSrc="images/lanren38.jpg" width="150" height="150" /></li>
			<li><img src="images/1px.gif" realSrc="images/lanren39.jpg" width="150" height="150" /></li>
			<li><img src="images/1px.gif" realSrc="images/lanren40.jpg" width="150" height="150" /></li>
			<li><img src="images/1px.gif" realSrc="images/lanren41.jpg" width="150" height="150" /></li>
			<li><img src="images/1px.gif" realSrc="images/lanren42.jpg" width="150" height="150" /></li>
			<li><img src="images/1px.gif" realSrc="images/lanren43.jpg" width="150" height="150" /></li>
			<li><img src="images/1px.gif" realSrc="images/lanren44.jpg" width="150" height="150" /></li>
			<li><img src="images/1px.gif" realSrc="images/lanren45.jpg" width="150" height="150" /></li>
		</div>
		<ul class="list">数据加载中，请稍后...</ul>
		<div class="more"><a href="javascript:;" onClick="javascript:loadMore();">加载更多</a></div>
	</div>
	<script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script>
	<script>
		var _default = 10; //默认显示图片个数
		var _loading = 5; //每次点击按钮后加载的个数
		var _content = [];//用来存储li循环内容
		function init(){
			var lis = $(".lanren .hidden li");
			$(".lanren ul.list").html("");
			for(var n=0;n<_default;n++){
				lis.eq(n).appendTo(".lanren ul.list");
			}
			$(".lanren ul.list img").each(function(){
				$(this).attr('src',$(this).attr('realSrc'));
			})
			for(var i=_default;i<lis.length;i++){
				_content.push(lis.eq(i));
			}
			$(".lanren .hidden").html("");
		}
		init();
		function loadMore(){
			var k =0,t,i;
			var mLis = $(".lanren ul.list li").length;
			for(i= mLis-_default;i<mLis-_loading;i++){
				if(i == _content.length){
					$('.lanren .more').html("<p>全部加载完毕...</p>");
					break;
				}
				_content[i].appendTo(".lanren ul.list");
				t = mLis + k;
				k++;
				$(".lanren ul.list img").eq(t).each(function(){
					$(this).attr('src',$(this).attr('realSrc'));
				});
			}
		}
	</script>
    <!--代码部分end-->
</body>
</html>


夏末_阳光依然耀眼
关注
专栏目录
jquery 实现点击加载更多
Jadenzy的专栏
09-30 8953
这是明智之举吗？
jquery实现加载更多
weixin_44387746的博客
11-19 573
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>点击按钮加载更多</title> </head> <bod...
jquery 点击加载更多 （可在一个页面实现多个）
10-31
jquery 点击加载更多 （可在一个页面实现多个）
Jquery点击加载更多
weixin_30580341的博客
04-12 850
一、点击加载更多有点像分页获取数据类似，下面是本人写的一个简单的小例子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.or...
鸿蒙5.0开发【数据列表加载更多】(无需监听列表滑到最底部)
最新发布
2401_82772199的博客
08-01 350
有数据列表的页面，一般需要使用[下拉刷新]和上拉加载的功能而数据列表实现加载下一页的功能，目前有以下几种方案
1.使用JQuery实现加载更多功能
zry15671554200的博客
09-13 610
代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> </style> </head> <body> <div class="content">1</div&gt
jquery点击加载更多
02-05
点击加载更多，目前已经被广泛使用，资源可提供参考。
jquery 点击加载更多
weixin_30443747的博客
07-10 187
html部分 <ul class="bill moreadd"> <div class="total"><span>-</span><span>23756.177</span></div> <li> <div class="left"> <p clas...
基于jQuery实现点击列表加载更多效果
10-22
"基于jQuery实现点击列表加载更多效果"是一种常见的优化页面加载性能的技术，尤其适用于内容丰富的列表或文章列表。这种方法允许用户在需要时按需加载更多的内容，而不是一次性加载所有数据，从而减少了页面的初始...
php+ajax+jquery实现点击加载更多内容
10-24
jquery.more.js是一个专门用于实现点击加载更多内容功能的jQuery插件，它已经封装好了很多功能，并提供了灵活的配置选项，让开发者可以很容易地定制和使用。 页面的HTML结构中需要有一个容器元素（比如div），用来...
jquery 上拉加载更多
02-10
在网页开发中，"jQuery 上拉加载更多"是一种常见的优化用户体验的技术，特别是在处理大量数据或内容的页面上，如新闻列表、社交媒体动态或电商产品展示等。这种技术允许用户滚动到页面底部时自动加载更多内容，而...
基于jquery库的点击加载更多实现（可在一个页面实现多个）
09-06
一个基于jquery库的点击加载更多实现（可在一个页面实现多个）。 真实的案例。 当初进行项目的时候没有找到合适的代码（找到的很多都是滚动条拖到底自动出现，没有点击出现的），并且要实现一个页面多个点击加载，所以动手写了一个，实现方法简单，调试方便，基于真实项目的实现设计，直接就可以用。 方便大家使用。
Jquery上拉滚动加载更多
10-15
Jquery实现手机端上拉滚动加载更多数据功能手指滑动，完美实现多数据分布加载效果。数据再多页面流畅展示。
jquery 滚动到底部时自动加载更多
12-21
jquery 滚动到底部时自动加载更多。简单思路仅供参考，不足之处请多包涵，相互学习共同进步。参考文章：http://blog.csdn.net/djk8888/article/details/53781452。我的腾讯微博：http://t.qq.com/djk8888
jQuery点击加载更多按钮加载图片效果
10-25
jQuery点击加载更多按钮加载图片效果 jQuery点击加载更多按钮加载图片效果
Jquery实现手机端上拉滚动加载更多数据
07-28
Jquery实现手机端上拉滚动加载更多数据功能手指滑动，完美实现多数据分布加载效果。数据再多页面流畅展示。
ThinkPHP+jquery实现“加载更多”功能代码
10-20
使用jQuery监听“加载更多”按钮的点击事件，当用户点击按钮时，向服务器发送请求获取更多数据。这部分代码没有在提供的内容中给出，但通常会是这样的： ```javascript $('.loadmore').click(function() { var ...
jquery点击加载更多内容插件
ICode联盟
05-27 297
下载地址 简单的jquery点击加载更多内容插件。该插件可以实现简单的通过点击按钮后超链接，来加载指定调试的内容的效果。 dd:
使用jQuery+PHP实现动态加载更多内容
" class="get_more">::点击加载更多内容:: ``` CSS样式用于美化“更多”加载区域和条目布局，例如设置边距、宽度、边框等，以确保页面视觉效果。 ```css #more { margin: 10px auto; width: 560px; border: 1...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值