ajax数据瀑布流加载

最新推荐文章于 2024-07-21 17:13:47 发布
最新推荐文章于 2024-07-21 17:13:47 发布
阅读量270 收藏
点赞数
分类专栏： javaScript 文章标签： ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42575310/article/details/103653164
版权

核心内容

$(window).scroll(function () {
					//获取滚动条高度
					var scrollTop = parseInt($(window).scrollTop());
					//获取窗口高度
					var viewH = $(window).height();
					//获取内容高度
					var contentH = $(document).height();
					if(scrollTop + viewH > contentH - 100 && flag == true){
						$(".rading").css("display","block");
						indexPage++;
						flag = !flag;
						getDateSource();
						setTimeout(function termer() {
	                   		 flag = !flag;
	                	}, 3000)
					}
})

核心解析

var scrollTop = parseInt($(window).scrollTop());获取滚动条高度
ar viewH = $(window).height();获取窗口高度
var contentH = $(document).height();获取内容高度
if(scrollTop + viewH > contentH - 100 && flag == true)如果滚动条的高度加窗口的高度大于(内容高度-100)就表示到底部了；其中(内容-100)表示距离底部100px的时候就开始加载

不多说了，先上干货 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{margin:0;padding: 0px;text-decoration: none;}
			li{
				width: 100%;
				list-style: none;
				height: 100px;
				margin: 5px 0px;
				padding: 5px 0;
				border: 1px solid #CCCCCC;
				background: #CCCCCC;
			}
			#tupian{
				display: inline-block;
				width: 20%;
				height: 90px;
				fixed:3;
				margin: 5px auto;
				padding-left: 10px;
				
			}
			li #tupian img{
				width: 90px;
				height: 90px;
				border-radius: 20%;
			}
			li .right-content{
				display: inline-block;
				width: 60%;
				height: 95px;
				margin: 2.5px auto;
				float: right;
			}
			li .right-content p{
				text-indent: 2em;
				margin: 8px auto;
			}
			li .right-content p span{
				text-decoration: line-through;
				color: red;
				font-size: 12px;
			}
			.rading{
				width: 100px;
				height: auto;
				margin: 10px auto;
				display: none;
			}
			.rading img{
				width: 100px;
			}
		</style>
	</head>
	<body>
		<ul id="list">
			<div class="rading">
				<img src="img/timg.gif" />
			</div>
		</ul>
		
		<script src="src/js/jquery-2.1.4.min.js"></script>
		<script>
			var storearr = new Array();
			var indexPage = 1;
    		var size = 10;
			var flag = true;
			$(function(){
				$(".rading").css("display","block");
				getDateSource()
				
				function getDateSource(){
					storearr.splice(0,storearr.length);
					console.log("============>"+storearr.length)
					console.log("============>"+indexPage)
					$.ajax({
		                url: "后台请求数据接口地址",
		                type: "post",
		                dataType: "json",
		                async: true,
		                data: {
		                    currentPage: indexPage,
		                    size:size
		                },
		                success: function (jsonResult) {
		                	console.log(jsonResult.data)
		                    $.each(jsonResult.data, function (index, value) {
		                        var arr = new Array();
		                        for (var x in value) {    
		                            arr.push(value[x]);
		                        }
		                        storearr.push(arr);
		                    })
		                    CreateTable();
		                }
		            });
		        }
				function CreateTable(){
					$(".rading").css("display","none");
					var li = "";
					 for (var i = 0; i < storearr.length; i++) {
					 	li +="<li>"
					 		li +="<div id='tupian'>";
					 			li +="<img src="+storearr[i][2]+"'>";
					 		li +="</div>";
					 		li +="<div class='right-content'>";
					 			li +="<p>"+storearr[i][0]+"</p>";
					 			li +="<p>￥"+"<span>"+storearr[i][12]+"</span></p>";
					 			li +="<p>￥"+"<span>"+storearr[i][13]+"</span></p>";
					 		li +="</div>";
					 	li +="</li>";
					 }
					 $("#list").append(li);
					 $(".rading").css("display","none");
				}
				
				$(window).scroll(function () {
					//获取滚动条高度
					var scrollTop = parseInt($(window).scrollTop());
					//获取窗口高度
					var viewH = $(window).height();
					//获取内容高度
					var contentH = $(document).height();
					if(scrollTop + viewH > contentH - 100 && flag == true){
						$(".rading").css("display","block");
						indexPage++;
						flag = !flag;
						getDateSource();
						setTimeout(function termer() {
	                   		 flag = !flag;
	                	}, 3000)
					}
				})
				
			});
			
			
		</script>
	</body>
</html>

结果

禅悟刂
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Ajax实现瀑布流动态加载Demo
10-15
瀑布流动态加载的原理：加载触发主要是通过js实现的。在页面的某个地方设置一个标记，当页面滚动到这个标记的位置时，触发加载。
javascript 瀑布流布局，ajax数据加载
06-01
瀑布流布局，也被称为Masonry...总的来说，实现JavaScript瀑布流布局结合AJAX数据加载，需要对DOM操作、事件监听、异步请求以及布局算法有深入理解。通过精心设计和优化，我们可以创建一个既美观又高效的数据展示界面。
jQuery ajax瀑布流加载静态的列表页面
weixin_30917213的博客
01-29 115
1.加载一行数据 <script> //滚动加载事件 var Loadurl = "{$url}"; if(window.location.href !== Loadurl){ window.location.href = Loadurl; } var pageTotal = "{ceil(min($total,$mintotal)/$...
Ajax实现瀑布流动态加载网页
Earl_yuan的专栏
10-14 6670
瀑布流的动态加载效果是我一直以来觉得最喜欢的效果之一了。最近在工作中遇到了一个情景，当我登录到系统中时，需要向另一个系统发送多次接口查询数据，之后再将这些数据显示到页面上。这就存在了这样一个问题：页面加载的时间过长，用户在登陆后就需要一直等待接口全部查询完毕后才能登录到系统中。这大大的降低了用户体验。所以我就决定使用瀑布流的效果来加载页面，在用户登陆后，先只查询一个接口，返显数据到页面上，这时用户
AJAX+json+jquery实现预加载瀑布流布局
iso_wsy的专栏
11-11 2684
代码片段(1)[全屏查看所有代码] 1. [代码][JavaScript]代码     跳至 [1] [全屏预览] ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
BlocksIt.js瀑布流插件结合ajax实现无限加载数据
草灯的专栏
10-10 4921
最近无聊，搜索了网络瀑布流插件，下载了BlocksIt.js的插件，在结合ajax异步获取数据。实现滚动无限加载数据。 刚开始以为只要把append添加内容地方替换为ajax方法就可以了，结果一测试完才发现有好多问题。 BlocksIt.js工作原理： 给选中的元素加上absolute属性，重新定位。然后根据以下标准计算top和left定位：         1、从左往右一个块一个
利用ajax实现瀑布流
09-25
在瀑布流布局中，当用户滚动到底部时，Ajax可以触发请求获取更多数据，从而动态加载新的内容。 二、JavaScript基础 JavaScript是实现瀑布流布局的关键，它是浏览器端的脚本语言，负责处理用户交互、DOM操作以及数据...
AJAX实现瀑布流触发分页与分页触发瀑布流的方法
09-02
AJAX（Asynchronous JavaScript and XML）在瀑布流布局中的应用主要是为了实现动态加载，即用户滚动页面时，新内容能够自动加载，而无需手动翻页。 **瀑布流触发分页**： 在瀑布流触发分页的场景中，系统会在用户...
jQuery实现的瀑布流加载效果示例
11-25
本示例是使用jQuery实现了一个简单的瀑布流加载效果。主要涉及的知识点包括： 1. **jQuery库**：jQuery是一个轻量级的JavaScript库，简化了HTML文档遍历、事件处理、动画和Ajax交互。在这个例子中，`$`符号就是...
jquery之ajax方法之瀑布流案例
weixin_44392027的博客
02-25 352
ajax很重要！！！！！！！！！ 刚接触感觉听得懂但做的时候就挺懵 话不多说上代码 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;瀑布流效果--规则的(局部刷新)&lt;/title&gt; &lt;style type=&quo
PHP结合Jquery和ajax实现瀑布流特效
10-23
php+ajax+jquery实现无限瀑布流布局 宽度是一定的高度不定的瀑布流布局 也可以说是无缝拼图 当浏览器滚动到底部时候自动加载图片,非常的实用，需要的小伙伴可以参考下。
jq.ajax+php+mysql实现瀑布流缓冲加载数据
12-23
jq.ajax+php+mysql实现瀑布流缓冲加载数据，适配窗口大小缩放，无限加载数据直到加载完
java ajax瀑布流,Ajax 实现滚动加载瀑布流 详解
weixin_29148445的博客
03-12 168
/*** 需求：* 1、页面加载完成后 请求服务器 获取第一屏的数据* 2、点击加载更多 请求服务器 获取下一屏的数据* 3、当页面滚动到一定的高度时 请求服务器 获取下一屏的数据 渲染在页面中*/一、html代码加载更多二、js代码/*** 需求：* 1、页面加载完成后 请求服务器 获取第一屏的数据* 2、点击加载更多 请求服务器 获取下一屏的数据* 3、当页面滚动到一定的高度时 请求服...
ajax瀑布流的实现
明知迷途，从未折返
12-05 474
原理分析
ajax瀑布流插件,jQuery瀑布流无限加载插件：jquery.falless.js
weixin_29200741的博客
08-06 388
慌慌张张，匆匆忙忙，为何生活总是这样？难道说，我的理想，就是这样度过一生的时光？...........真的是一年一年飞逝而去，而人的一生，又有几个一年？第一个四年即将结束，得到了什么？又失去了什么？仔细想想，却并没有答案。而夜深人静的时候，想起四年前的自己，三年前的自己，真的和现在的自己不一样了。现在这样的我，还依旧是我吗？不知道。不过就像《活着》这首歌中所表达的那样，生活，也许真的就是这样。又有...
用ajax写瀑布流,Ajax实现的图片瀑布流（超详细的哦）
weixin_36095974的博客
08-05 385
所谓瀑布流就是让大小尺寸不同的图片像瀑布一样，整个页面都布满图片而在Ajax中，瀑布流可以说是很常见的，利用瀑布流无限加载技术，取消了分页按钮，鼠标滑动到底部会自动加载图片先上一下效果图：html结构 和 css样式* {margin: 0;padding: 0;box-sizing: border-box;}img {width: 250px;position: absolute;display...
【js】瀑布流、向下滑动、ajax先加载完图片再排列
joker
06-02 1569
最近的项目中经常会碰到以瀑布流方式布局的问题。先从网上找了个瀑布流的图片排列插件。这里暂且用 jquery.masonry.js 废话不多说、直接上源码 &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta http-equiv="X-UA-Compatible"
Ajax学习笔记
最新发布
2301_79614379的博客
07-21 1045
定义：asyn和await关键字让我们可以用一种更简洁的方式写出基于Promise的异步行为，而无需刻意地链式调用Promise。概念：在async函数内，使用await关键字取代then函数，等待获取Promise对象成功状态的结果值。定义：执行代码和收集异步任务的模型，在调用栈空闲，反复调用任务队列里回调函数的执行机制，就叫事件循环。axios响应拦截器：响应回到then/catch之前，触发的拦截函数，对响应的结果统一处理。Promise本身是同步的，而then和catch回调函数是异步的。
用ajax写一个瀑布流
02-06
要使用 AJAX 实现瀑布流，你需要进行以下步骤： 1. 创建一个网页布局，使用垂直列来放置内容块。 2. 使用 JavaScript 和 jQuery 库，在网页加载时向服务器发送 AJAX 请求。 3. 服务器接收请求后，返回一些内容块的 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值