讲一下大概的原理吧,还是先上图:
功能描述:
根据不同菜单的属性值分别加载不同的数据
下拉滚动条到一定位置预加载图片,滚动条拉到最底下的时候渲染html;
鼠标移到菜单,切换各个图片列表;
鼠标移到图片列表上,显示详细信息;
技术实现方案:
先梳理一下从加载到显示的流程:
1. 加载数据
2. 拼接HTML写入到页面
3. 检查刚刚写入的HTML中的img是否全部加载完成,如果是,进入5、否则进入4
4. 等待图片加载完成
5. 计算每个元素的位置
一开始的时候最头疼的是如何定位的问题,后来经过朋友指导终于解决:计算总共有多少列