【文件属性】：
文件名称：gifs-r-us：您需要的所有GIF都在Gifs-R-Us
文件大小：218KB
文件格式：ZIP
更新时间：2021-02-16 00:07:29
gifs giphy giphy-api TypeScript
Gifs-R-Us :party_popper:
一个基于GIF浏览器。
在本地运行
该应用程序是使用构建的，可以根据CRA的设置运行：
yarn install
yarn start
网格
网格使用布局，其列宽为200px，自动行数为10px高。 趋势和搜索页面使用固定高度的GIF，因此为GIF分配了固定的行数，四舍五入到最接近的10像素，以便浏览器可以在调整窗口大小时处理列。
资料载入
循环->
趋势/搜索页面检查scrollY + clientHeight是否在可滚动高度底部的offset之内
不在底部offset范围内吗？ 结尾
请求从offset开始的下一个GIF块
取回返回时更新offset ，触发LOOP的开始
<-结束
窗口上的滚动侦听器从LOOP的顶部开始
卸载页面会删除滚动侦听器并取消所有运行中的请求
笔记
搜索和趋势页面最终在数据加载方面非常相似，理想情况下可以将其分解为一个通用的钩
【文件预览】：
gifs-r-us-master
----.gitignore(310B)
----package.json(2KB)
----src()
--------Navbar.tsx(2KB)
--------react-app-env.d.ts(40B)
--------Gif.tsx(2KB)
--------GiphyApiConstants.ts(104B)
--------setupTests.ts(255B)
--------App.css(816B)
--------Gif.css(300B)
--------store()
--------index.tsx(481B)
--------App.test.tsx(280B)
--------pages()
--------types.ts(3KB)
--------serviceWorker.ts(5KB)
--------App.tsx(1KB)
----LICENSE(1KB)
----public()
--------robots.txt(67B)
--------logo192.png(5KB)
--------index.html(2KB)
--------favicon.ico(3KB)
--------manifest.json(501B)
--------logo512.png(9KB)
----tsconfig.json(491B)
----.prettierrc.js(21B)
----README.md(2KB)
----yarn.lock(475KB)