js滚动加载数据
话不多说，直接上代码，有些地方需要加自己的逻辑，自己加
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>滚动条测试</title>
<style>
.parent_div {
width: auto;
height: auto
}
.lostfound-text{
width: 200px;
height: 50px;
border: 1px red solid;
}
</style>
</head>
<body>
<div class="parent_div">
<div style="width: 100%;height: 500px;border: black 1px solid;"></div>
<ul id="my_list">
<li class="lostfound-text">This is list item origin.</li>
</ul>
</div>
<script src="js/jquery.min.js"></script>
<script>
$(function(){
var pos = 0;
var LIST_ITEM_SIZE = 2;
//滚动条距底部的距离
var BOTTOM_OFFSET = 0;
createListItems();
$(document).ready(function () {
$(window).scroll(function () {
var $currentWindow = $(window);
//当前窗口的高度
var windowHeight = $currentWindow.height();
//当前滚动条从上往下滚动的距离
var scrollTop = $currentWindow.scrollTop();
//当前文档的高度
var docHeight = $(document).height();
//当 滚动条距底部的距离 + 滚动条滚动的距离 >= 文档的高度 - 窗口的高度
//换句话说：（滚动条滚动的距离 + 窗口的高度 = 文档的高度） 这个是基本的公式
if ((BOTTOM_OFFSET + scrollTop) >= docHeight - windowHeight) {
//这里可以写判断逻辑
createListItems();
}
});
});
function createListItems() {
var mylist = $("#my_list");
for (var i = pos; i < pos + LIST_ITEM_SIZE; ++i) {
let x='<li class="lostfound-text">This is list item origin.</li>';
mylist.append(x);
}
pos += LIST_ITEM_SIZE;
}
})
</script>
</body>
</html>
js滚动加载数据的更多相关文章
- h5页面列表滚动加载数据
h5列表滚动加载数据很常见,以下分享下今天做的案例: 前言 这个效果实现需要知道三个参数 1. scrollTop -- 滚动条距离顶部的高度 2. scrollHeight -- 当前页面的总高度( ...
- PHP+InfiniteScroll实现网页无限滚动加载数据实例
PHP+InfiniteScroll实现网页无限滚动加载数据实例,实现原理:当滚动条到底离网页底部一定长度的时候,向后台发送页数并获取数据. 首先我们在页面上先放置10条数据,即第一页,每一项都是p标 ...
- js滚动加载小插件
本文实例讲述了jquery滚动加载数据的方法.分享给大家供大家参考.具体分析如下: 少废话直接上代码!!!粗暴,直接,干脆 0//lk-2017-05-04 1(function($, win) { ...
- vue2.0无限滚动加载数据插件
做vue项目用到下拉滚动加载数据功能,由于选的UI库(element)没有这个组件,就用Vue-infinite-loading 这个插件代替,使用中遇到的一些问题及使用方法,总结作记录! 安装: ...
- js动态加载数据并合并单元格
js动态加载数据合并单元格, 代码如下所示,可复制直接运行: <!DOCTYPE HTML> <html lang="en-US"> <head> ...
- 关于使用Iscroll.js异步加载数据后不能滑动到最底端的问题解决方案
关于使用Iscroll.js异步加载数据后不能滑动到最底端,拉到最下边又弹回去的问题困扰了我老半天,相信很多朋友都遇到了.我刚好不小心解决了,和大家分享一下.由于各种忙,下边就直接上代码吧. (前提是 ...
- jquery ajax 滚动加载数据
jquery php 滚动加载数据(文件包 rollingpage) 效果如下: 页面加载时候($function(){ 自动加载第一页数据 }) 设置: var winH = $(window).h ...
- 基于jquery鼠标或者移动端滚动加载数据
基于jquery鼠标或者移动端滚动加载数据 var stop = true; // 防止重复请求数据 $(window).scroll(function () { totalheight = pars ...
- Vue无限滚动加载数据
Web项目经常会用到下拉滚动加载数据的功能,今天就来种草Vue-infinite-loading 这个插件,讲解一下使用方法! 第一步:安装 npm install vue-infinite-load ...
- infinite-scroll插件无限滚动加载数据的使用
网上对于infinite-scroll插件使用的例子不多.但由于它的出现,鼓吹了瀑布流形式的页面展示方式,所以不得不了解了解这种新的分页方式. 官网上有对infinite-scroll的详细描述,但一 ...
随机推荐
- nacos启动失败
报错如下: 通过第二个圈可以看出,没有发现9848端口,才想起来自己Spring Cloud Alibaba依赖对应的nacos版本是2.0.4,而启动的nacos服务却是1.x版本,才导致这个报错. ...
- ubantu下的java的发布
1.先检查是否安装过 java version 2.卸载的命令 sudo apt-get remove openjdk* 3.创建存放jdk的目录 sudo mkdir /usr/lib/jvm 4. ...
- 【Linux】ntpdate与ntpd区别
前两天遇到时间显示的问题,整理记录下来. 问题描述:开机程序startA自己统计自己的运行时间,每次运行时间显示异常,类似17713d45h54m. 有一些猜测:1.计算异常,出现负数:2.获取时间异 ...
- C# RSA加密解密 签名实现
class RSACryptoItem { public RSACryptoServiceProvider Provider; public List<byte> PubKeyBytes; ...
- Gitbook编写JSON文件
title: Gitbook编写JSON文件 # 标题 date: 2020-10-31 16:34:30 updated: 2020-12-31 categories: 前端 tags: JSON ...
- Python 切片/列表/字符串之间装换
1. 怎么实现字符串变为list 使用split(),把字符串拆分再存入数组: 例子 input="ni si shi" output=input.split(" &qu ...
- 实验一-Password engine-加密API研究
加密API研究 181210 一.列举API在编程中的使用方式 GMT 0016-2012 类型定义 typedef struct Struct_DEVINFO{ VERSION Version; C ...
- jsp 格式化日期
第一步,引入工具包: <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %&g ...
- js防止表单重复方法
用flag标识,下面的代码设置checkSubmitFlg标志: <script language=""javascript""> var chec ...
- Java基础学习：4、类和对象及方法
类:事物的描述.是具备某些共同特征的实体的集合,它是一种抽象的数据类型,它是对所具有相同特征实体的抽象. 对象:该类事物的实例.在Java中通过new进行创建.是一个真实世界中的实体.对象是一种个性的 ...