jquery列表点击加载更多

夏末_阳光依然耀眼 夏末_阳光依然耀眼 博客等级 墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 3.4k累计阅读 3.5k平均单平台 已同步平台 优快云 微信公众号 微博 知乎 掘金 百家号 博客园 抖音 小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要 码龄15年
关注
转载 最新推荐文章于 2026-06-04 11:01:10 发布 3.4k 阅读 AI 写同款· GEO 优化 ›
jquery 点击加载更多 （可在一个页面实现多个） 立即下载

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>


收录于
div+css

当前文章被收录于：

div+css
89 篇文章 0 人学习
订阅专栏 查看详情
标签
#javascript #jquery #js
jquery点击加载更多 点击加载更多，目前已经被广泛使用，资源可提供参考。 立即下载

相关推荐

Mac上IDEA的PlantUML插件报错‘找不到Graphviz’？手把手教你用Homebrew搞定（附阿里云镜像避坑）

本文详细解决了Mac上IDEA的PlantUML插件报错‘找不到Graphviz’的问题，通过Homebrew安装Graphviz并配置阿里云镜像源，特别针对Apple Silicon芯片用户提供了优化方案。文章还涵盖了IDEA中PlantUML插件的正确配置和常见问题排查，帮助开发者高效使用PlantUML进行UML图表设计。

weixin_42619742的博客 469

jquery 实现点击加载更多

这是明智之举吗？

Jadenzy的专栏 9162

科普：Frenet坐标

理想情况下，描述这种常见驾驶行为在数学上应该很容易。一种方法是使用新的坐标系。现在，而不是放下一个正常的笛卡尔网格，我们做一些事情，就像你看到下面…Frenet Coordinates是一种以比传统x，y笛卡尔坐标更直观的方式表示道路位置的方式。如果我们想要方程式来描述这个动作，那就不容易了！想象一下像下面这样一条弯曲的道路，笛卡尔坐标系就位于它的上面…使用这些笛卡尔坐标，我们可以尝试描述车辆通常在路上行驶的路径…那么在Frenet坐标系下呈现的典型轨迹是什么样的？在这里，我们定义了一个新的坐标系统。

OceanStar的博客 1万+

php点击更多展开,jQuery实现点击展开（加载）更多内容

这是一篇记录文字：用的是[code lang=”php code:[code lang=”php”]function wppress_json(){$wp = M(‘Wppress’);$input = $_GET[‘page’];$start = $input*5;$list = $wp->limit("$start,5")->order("time desc")->selec...

weixin_42423852的博客 316

Python蓝色跳动的爱心（完整代码）

Python语言实现蓝色跳动的爱心的完整代码。 代码分析 这段代码使用了 库来创建一个动态的爱心图案，并在屏幕上显示带有动态效果的“我爱你”字样。以下是对这段代码的详细分析： 用于创建图形用户界面（GUI）。 用于生成随机数，主要用于控制爱心图案的扩散效果。 中的 , , , 用于数学计算，生成爱心形状和扩散效果。 包含了 等常量，用于控制控件的对齐方式。 2. 全局变量定义 , : 定义画布的大小。 , : 爱心的中心坐标。 : 用于定义爱心形状的缩放

AIGC 1921

010、Zephyr RTOS开发环境搭建（Docker）

摘要 本文分享了使用Docker搭建Zephyr RTOS开发环境的实践经验。作者通过团队新人配置环境的真实案例，指出传统安装方式存在版本冲突、缓存污染等问题，而Docker方案能确保环境一致性。文章详细介绍了自定义Docker镜像的设计思路，重点解决工具链版本匹配、Python虚拟环境隔离等问题，将镜像体积从2GB优化到800MB。提供了从拉取镜像到点亮LED的完整工作流程，并总结了USB设备直通、文件权限、缓存问题等常见陷阱。还探讨了多阶段构建、CI集成等进阶用法，同时客观分析了Docker方案的局限性

m0_50546716的博客 80

jquery制作图片瀑布流点击按钮加载更多内容

$(function() {     //url data function dataType     function loadMeinv() {         var data = 0;         for (var i = 0; i             data = parseInt(Math.random() * 25);             var html

lhzjj的专栏 5486

PR工具timing report中setup time的计算过程

然后去pr工具里报告report_delay_calculation/reportDelayCalculation -from related_pin -to constraint_pin。这里constraint pin就是D pin (D0 D1 D2 D3)，related pin就是 CK pin。我正在「拾陆楼」和朋友们讨论有趣的话题，你⼀起来吧？

m0_61544122的博客 455

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

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

zry15671554200的博客 704

Windows窗口编程中的WM_PAINT、WM_ERASEBKGND、InvalidateRect、UpdateWindow、BeginPaint和EndPaint等函数详解

Windows窗口编程中的WM_PAINT、WM_ERASEBKGND、InvalidateRect、UpdateWindow、BeginPaint和EndPaint等函数详解

dvlinker的技术专栏 7166

19、利用PostGIS进行空间分析：更高效的矢量分析方法

本文介绍了如何利用PostGIS进行高效灵活的矢量空间分析，重点探讨了在选址安静住宅场景中使用缓冲区和距离测量两种方法的实现与优化。通过QGIS与PostGIS结合，演示了数据上传、CTE应用、ST_Intersects与ST_Distance函数对比，并深入分析了横向子查询在提升查询性能和代码可读性方面的优势。文章还比较了不同方法的适用场景，并以房地产开发选址为例展示了完整分析流程，最后总结了PostGIS在空间分析中的强大能力与未来应用前景。

d3e4f的博客 92

列表加载更多 ajax,jquery列表点击加载更多

原生点击按钮加载更多(懒加载，每次加载N个)*{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...

weixin_36159799的博客 458

MTK Android 12 Clone Project 克隆项目

本文介绍了如何使用MTK Android 12 Clone Project 克隆一个新的项目。通过使用绝对路径执行Perl脚本，并根据需要选择升级或降级位数，可以成功地生成一个新的项目并进行编译。希望本文对xdm有所帮助。

我其实什么都不会 942

jQuery+php+Ajax文章列表点击加载更多功能

jQuery+php+Ajax实现的一个简单实用的文章列表点击加载更多功能，点击加载更多按钮，文章列表加载更多数据，加载中有loading动画效果。 js部分： <script type="text/javascript" src="jquery.more.js"></script> <script type="text/...

qq_27564351的博客 426

锂电池充电器电路设计 里面有电路

锂电池充电器电路设计 里面有电路 3.7V升压到5V电路设计。

visio安装包

Microsoft Office Visio 是一款专业的制图软件。利用经过更新的形状、协作工具和数据链接图表，创建专业级图表以简化复杂的信息。

基于jQuery实现点击列表加载更多效果

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery showMore 显示...

weixin_30583563的博客 750

NTscan扫描工具

ntscan是一个扫描器，可以扫描没有密码和弱密码的共享，先到配置文件中填写猜测的用户名和密码，扫描过程中右侧出现的是扫描日志。

点击加载更多java实现_基于jQuery实现点击列表加载更多效果

jquery showMore 显示更多abcdefghijkmabcdefghijkmnews 11news 12news 13news 14news 21news 22news 23news 24news 31news 32news 33news 34//调用显示更多插件。参数是标准的 jquery 选择符$.showMore(".showMoreNChildren,.mynews");Jav...

weixin_39611031的博客 299

蓝牙模块HM-10手册

蓝牙模块HM-10手册，该手册对蓝牙模块HM-10进行了详细的介绍和使用方法以及一些AT指令。

PHP+Ajax点击加载更多列表数据实例

一款简单实用的PHP+Ajax点击加载更多列表数据实例，实现原理：通过“更多”按钮向服务端发送Ajax请求，PHP根据分页参数查询将最新的几条记录，数据以JSON形式返回，前台Query解析JSON数据，并将数据追加到列表页。其实也是Ajax分页效果。 html代码： <div id="more"> <div class="single_item">...

qq_27564351的博客 379

jquery+weui实现ajax请求滚动加载更多列表，点击进入详情，返回列表回到刚刚用户浏览的位置！

最近领导分配了一个新的项目来维护，jq+weui写的微信端项目，因为之前一直用的vue，所以遇到了好多坑。单单这个滚动加载就花了一天时间，现在记录一下实现过程吧，加深一下印象，避免日后再次踩坑。

Mrchoi的博客 1266

JQuery点击按钮显示更多列表

JQuery显示更多1. 初始显示3条2. 点击显示/隐藏剩余的所有元素3. 点击显示更多，陆续增加列表 JQuery点击按钮显示更多列表，从静态到动态，（后续再补充分页） 1. 初始显示3条 下面是初始加载效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=devi

qq_37800258的博客 1204

asp实现ajax点击加载更多

首先定义自己的文章结构 <div class="news"> <ul class="list"> <li class="flex-between"> <img src="images/1.jpg" alt=""> <div> <p><a href="{$list.url}" title

点滴分享博客 650

列表页点击加载更多，无刷新加载更多文章的方法（yii）

先说下看到这个问题后的思路，首先有个更多按钮，当点击更多按钮时候，触发一个js事件，js通过ajax向controller传值，并返回相关json数据，循环json数据，加到页面相关位置。 更多 $('.get_more').click(function(){ //取得现在页面上的文章数 var articlecount = $('.xxx').length; $.a

u010674395的专栏 1697

Listview 加载更多

JQM Listview 加载更多 demo - Warren的个人主页 JQM Listview 加载更多 Demo 测试数据1 测试数据2 测试数据3 测试数据4 显示更多 Page Footer <!DOCTYPE HTML> <html> ...

weixin_30390075的博客 85

dede文章异步ajax加载,织梦列表使用ajax点击加载更多

本文介绍如何使用ajax技术实现dede列表内容点击加载更多内容需要使用jquery-ias.min.js，下载地址: https://pan.baidu.com/s/1UJ4RRwDCZYu6oE-RbbC5Bw 密码: xnchjquery.js 与 jquery-ias.min.js：添加js代码var ias = $.ias({container: ".listbox", //包含所有文章...

weixin_36309562的博客 311

前端html列表加载更多效果（默认取出所有数据，用js控制显示数量，也可以用分页的形式进行ajax请求，这种暂时木有写）

代码说明，页面是用freemarker写的，newsModel.list  是所有的数据； &lt;ul class="affair_list" pagesize="3"&gt;  这句是关键&lt;#if type=='news'&gt;                &lt;ul class="affair_list" pagesize="3"&gt;             

wudiansheng的博客 4834
上一篇： jquery ajax提交表单实例
下一篇： 关于腾讯视频遮住div解决办法
点赞 1
评论 1
书签 书签 8
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值