javascript实现瀑布流加载图片原理

时间：2021-05-26

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

功能描述：

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

技术实现方案：

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

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

// 创建用于记录每列高度的数组_getLowestCol: function() { t._cols = new Array(5),min = 0; // 初始化为0 for (var i = 0; i < t._cols.length; i++) { if (cols[i] < cols[min]) { min = i; } return min; }},_reposition: function() { t._grids.each(function(i, grid) { //先显示出来 grid = $(grid).show(); var height = grid.outerHeight(), min = t._getLowestCol(); // 定位 grid.animate({ left: (t._colWidth + t._colSpacing) * min, top: t._cols[min], opacity: 1 },1000); // 记录高度 t._cols[min] += height; });}

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

以下为全部代码：
html：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://plete) { allImgsLoaded = false; } return allImgsLoaded; }); if (allImgsLoaded) { t._grids.each(function(i, grid) { //先显示出来 grid = $(grid).show(); var height = grid.outerHeight(), min = t._getLowestCol(); // 非第一行的时候，要加上行间隔 if (t._cols[min]) { t._cols[min] += t._rowSpacing; } // 定位 grid.animate({ left: (t._colWidth + t._colSpacing) * min, top: t._cols[min], opacity: 1 },1000); // 记录高度 t._cols[min] += height; }); // 重设外层容器高度为最高列高度 t._container.css( 'height', Math.max.apply(Math, t._cols) ); t._switch = false; delete t._grids; } return allImgsLoaded; }, } return waterFall;});

以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。

javascript实现瀑布流加载图片原理

相关文章

javascript实现瀑布流动态加载图片原理

原生js页面滚动延迟加载图片

jquery 插件实现瀑布流图片展示实例

详解纯css实现瀑布流（multi-column多列及flex布局）

js实现仿百度瀑布流的方法