共计 1441 个字符，预计需要花费 4 分钟才能阅读完成。
工作我的项目实现瀑布流向上滚动到顶加载上一页，向下滚动到底加载下一页。依据最小高度优先排列。
设计思维
v1: 一开始需要只有向下滚动到底加载下一页，默认初始加载第一页。从左到右从上到下排列。判断滚动条达到底部发出请求加载下一页。列数不是固定的，依据 window 的宽度跟单卡宽度的比照确定以后展现的列数，依据列数循环加载单卡，设置单卡的 top 和 left 款式。left 能够间接依据 index 和列数来确定。top 须要计算当前列之前数据的高度总和。
v2: 单卡中图片的高度差距较大导致在每列数据个数雷同的状况下，高度差有可能很大。界面不美观。需要更新为按以后高度最小列排放数据。多增加了一个记录高度的数组变量，渲染也变成了优先渲染列数的 div，每列 div 渲染该列的数据。须要先依据列数将以后已存在的数据结构变更成二元数组，不便后续渲染。每列的 div 只用依据列数设置 left，每列中的数据只用依据当前列该数据之前的数据高度和来设置 top。
v3: 列表模式和网格模式切换时，牵扯到数据更新的问题。需要设定，列表模式跳转到网格模式时，网格模式应该对应显示当前页，即列表模式为第三页则网格模式显示第三页。需要减少向上滚动到顶加载上一页的性能。
抉择的计划
监控滚动条的计划：onScroll 办法，用 Ref 绑定滚动条组件范畴。用钩子生成 onScroll 监控滚动条变动时进行函数内操作。也就是说，每次检测到滚动条变动都会去判断是否达到顶部或者达到底部，进而进行申请和数据更新。如果是上一页的数据，须要将新数据增加到原有数据之前并从新进行排列和渲染，如果是下一页数据，须要将新数据增加到原有数据之后，只须要排列渲染新数据。
遇到的问题
- 如果只在页面初始加载时生成一次 onScroll，后续绑定事件不会更新，只会有限加载第二页，useEffect 闭包问题 。若每次检测到滚动条变动就生成一次 onScroll 就须要防抖计划。
- scrollTop + clientHeight 与 scrollHeight 达到底部时会呈现不出名的 0. 几的误差，问题临时不晓得是为什么。会导致经常出现滚动条到底部但未能触发到底部操作的问题。所以通过判断时 scrollHeight – 1 来解决，然而这样就有一个新问题。本来只有到 scrollTop + clientHeight >= scrollHeight 这个节点才会触发一次 onScroll 到底操作，当初因为这 1 高度的差值导致在这 1 高度中会呈现反复申请的问题，会呈现一次加载多页但加载不齐全问题，须要防抖或者管制申请完结前不会再次触发申请。
- 在页面加载最初一页时，有可能会因为数据有余而导致渲染高度不够未呈现滚动条的状况，无奈进行滚动条触发申请。所以在判断当前页为最初一页时，判断列最大高度是否超过 scrollHeight，如果未超过，则给他底部增加填充 div 用来撑起页面使滚动条显示。
- 在页面初始渲染胜利时，不论是在哪一页，滚动条都默认是顶部。在不触发向下滚动操作时，无奈向上滚动，无奈进行加载上一页的申请。所以在页码非第一页时，给顶部填充 10px 的 div 并将滚动条设定在 10px 的高度。使得视觉上和原来没有区别，并且有肯定向上滚动区间去触发加载上一页操作。
- 因为未留神，用 index 值来作为列的 key 值导致从新渲染页面时，会呈现上一次数据的残留冗余。
其余办法
- 间接在滚动条所在 div 中应用 onScrollCapture 来监控滚动条变动，不会有闭包问题，也没有呈现高度差问题。
- 用现有的上拉加载下拉刷新组件（尝试、学习中）
正文完
