瀑布流无限加载的原理

无限加载也叫上拉自动加载、瀑布流、滑动底部加载等，具体指的是页面刚开始不加载全部内容，先加载首屏或者用户屏幕可见内容，当用户滑动页面到底部后，页面才自动加载更多内容。

通过window.scrollY获取界面滚动多少距离
通过windwo,innerHeight获取视窗的高度
然后获取列表容器的高度 contentHeight

window.scrollY + window,innerHeight < contentHeight
说明列表底部还没有显示出来

window.scrollY + window.innerHeight === contentHeight
说明列表底部已经到底部，然后进行加载下一页

下面是我模拟的h5无线加载的demo，用react语法写的函数组件。需浏览器打开手机开发模式选择iphone5或者iphone6,7,8类似屏幕大小屏幕

header.less代码

.header{background-color: #0066FF;color: white;height: 32px;display: flex;flex-direction: column;justify-content: space-between;line-height: 32px;>span{padding: 0 20px;font-size: 14px;}
}

header.js文件代码

import './header.less'
import React, { useState, useEffect, useRef } from 'react';
const dataArr = [{ name: 'hello' }, { name: 'hello' }, { name: 'hello' }, { name: 'hello' }, { name: 'hello' }, { name: 'hello' }, { name: 'hello' }, { name: 'hello' }, { name: 'hello' }, { name: 'hello' }, { name: 'hello' }, { name: 'hello' }, { name: 'hello' }, { name: 'hello' }, { name: 'hello' }, { name: 'hello' }, { name: 'hello' }, { name: 'hello' }, { name: 'hello' }, { name: 'hello' }, { name: 'hello' }, { name: 'hello' }]
function Header() {const windowHeight = window.innerHeight;const headerRef = useRef(null);let [data, setData] = useState(dataArr);useEffect(() => {// Update the document title using the browser APIwindow.addEventListener('scroll', (event) => {console.log('windowHeight', windowHeight, 'window.scrollY', window.scrollY, 'elementHeight', headerRef.current.clientHeight)if (headerRef.current.clientHeight - windowHeight - window.scrollY < 10) {console.log("距离底部10了加载数据")data = data.concat(dataArr)setData(data)}})});return (<div className="header" ><div ref={headerRef}>{data.map((item, index) => {return (<div key={index}>{item.name}{index}</div>)})}</div></div>)}
export default Header;

瀑布流无限加载的原理相关推荐

利用ajax实现织梦dedecms瀑布流无限加载功能
该功能主要用到AJAX技术! 一.首先找到并打开/plus/list.php文件,在里面找到如下代码: require_once(dirname(__FILE__)."/../include ...
ajax瀑布流插件,jQuery瀑布流无限加载插件：jquery.falless.js
慌慌张张,匆匆忙忙,为何生活总是这样? 难道说,我的理想,就是这样度过一生的时光?........... 真的是一年一年飞逝而去,而人的一生,又有几个一年? 第一个四年即将结束,得到了什么?又失去了什 ...
小程序瀑布流无限加载
由于想做成瀑布流,故一开始使用如下的方式: .waterfall-container {column-count: 2;column-gap: 30rpx; } 但是,由于这种 column-cou ...
html动态加载图片,javascript实现瀑布流动态加载图片原理
本文实例为大家分享了js瀑布流加载效果,动态加载图片,供大家参考,具体内容如下鼠标滚动事件,当鼠标滚动到下边,动态加载图片. 1. HTML代码 js实现瀑布流效果-动态加载图片 2. CSS代码 ...
JS——瀑布流无限加载以及动态生成a标签
如何实现瀑布流排列效果?看下面这张图通过js去比较每张图片的高度,然后进行排列. 这是一个模拟的瀑布流的list列表项 <div id="main"><div ...
Ajax实现瀑布流动态加载网页
瀑布流的动态加载效果是我一直以来觉得最喜欢的效果之一了.最近在工作中遇到了一个情景,当我登录到系统中时,需要向另一个系统发送多次接口查询数据,之后再将这些数据显示到页面上.这就存在了这样一个问题:页面 ...
uniapp实现瀑布流懒加载实现和无限上拉加载更多
效果图: 说明: 函数说明:传入一个数组,循环获取图片高度,会根据把原数组拆分成两个数组,放在两列, 计算单列累计高度,对比高度值的大小,实现瀑布流的布局, ...
js无限加载分页原理实现
一般来说,很多网页都是用瀑布流进行内容显示.当可见区域滚动到底部时,自动加载下一段页面.原理显而易见,观察滚动条底部和窗口底部的距离便可. 当滚动条底部距离窗口底部一定距离时,触发ajax请求下一页内 ...
jq.ajax+php+mysql实现瀑布流缓冲加载数据
效果图如下: html+css代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content- ...

瀑布流无限加载的原理

瀑布流无限加载的原理相关推荐

最新文章

热门文章