瀑布流无限加载的原理

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

通过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 API
        window.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;