javascript实现瀑布流加载图片原理(js debounce实现)

编辑：rootadmin

推荐整理分享javascript实现瀑布流加载图片原理(js debounce实现)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:javascript show,js实现promise.all,js debounce实现,js实现promise.all,js瀑布流布局,javascript ul,js实现瀑布流效果,js瀑布流效果代码,内容如对您有帮助，希望把文章链接给更多的朋友！

讲一下大概的原理吧，还是先上图：

功能描述：

根据不同菜单的属性值分别加载不同的数据下拉滚动条到一定位置预加载图片，滚动条拉到最底下的时候渲染html；鼠标移到菜单，切换各个图片列表；鼠标移到图片列表上，显示详细信息； javascript实现瀑布流加载图片原理(js debounce实现)

技术实现方案：

　　先梳理一下从加载到显示的流程：　　1. 加载数据　　2. 拼接HTML写入到页面　　3. 检查刚刚写入的HTML中的img是否全部加载完成，如果是，进入5、否则进入4　　4. 等待图片加载完成　　5. 计算每个元素的位置

　　一开始的时候最头疼的是如何定位的问题，后来经过朋友指导终于解决：计算总共有多少列图片并且把每一列的高度都放到一个数组里面。每当一张图片加载完成的时候就查找这个数组里面最小的值，并且定位当前图片的top设置为这个值，完成后把这个图片的高度加上数组里面的最小值并且返回到数组里面，依次类推。 PS：因为这个功能代码太多，只能作基本的简单分解代码了：　

　其次开发过程中遇到的难题是：因为如上图所示，鼠标移动到菜单栏需要切换图片列表，并且分别需要用瀑布流加载不同类型的数据。所以要处理在切换页面的时候如何才能做到每个页面只执行一次代码请求接口，而不需要每一次切换都重新请求数据接口，仅仅执行切换显示图片列表的操作就可以了。　　考虑到每一个菜单都有一个自定义属性，所以这个问题轻易地解决了：建立一个对象来记录当前菜单是否已经执行过代码，如果没有就执行请求数据。　

以下为全部代码：html：

js：

标签: js debounce实现

本文链接地址:https://www.jiuchutong.com/biancheng/381705.html 转载请保留说明！

上一篇：Hammer.js+轮播原理实现简洁的滑屏功能(轮播怎么实现)

下一篇：JavaScript实现的SHA-1加密算法完整实例(js能实现的简单效果)