javascript实现瀑布流加载图片原理_javascript技巧
程序员文章站
2023-12-25 07:59:45
...
讲一下大概的原理吧,还是先上图:
功能描述:
- 根据不同菜单的属性值分别加载不同的数据
- 下拉滚动条到一定位置预加载图片,滚动条拉到最底下的时候渲染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
其次开发过程中遇到的难题是:因为如上图所示,鼠标移动到菜单栏需要切换图片列表,并且分别需要用瀑布流加载不同类型的数据。所以要处理在切换页面的时候如何才能做到每个页面只执行一次代码请求接口,而不需要每一次切换都重新请求数据接口,仅仅执行切换显示图片列表的操作就可以了。
考虑到每一个菜单都有一个自定义属性,所以这个问题轻易地解决了:建立一个对象来记录当前菜单是否已经执行过代码,如果没有就执行请求数据 。
var isLoad = {};//是否载入过 labelType.mouseover(function() { var i = $(this).index(); var api = _this.attr('api');//接口标识 if(! isLoad[ api ]){ isLoad[ api ] = i; loadData(wrapper, api); } });
以下为全部代码:
html:
加载中...
js:
/** * 瀑布流布局组件类 * @param {Object} options 组件设置 * @param {NodeList} options.container 瀑布流容器 * @param {String} options.dataURL 数据地址 * @param {String} [options.dataType='jsonp'] 数据类型,json或jsonp * @param {String} options.template 模板编辑 * @param {Number} [options.colWidth] 图片大小。 * @param {Number} [options.colSpacing] 列间隔。 * @param {Number} [options.rowSpacing] 行间隔。 * @param {Number} [options.page=1] 数据开始页码 * @param {Number} [options.pageEnd] 数据末尾页码 * @pageNum() 函数,如果不需要现在加载也是,需要把函数里面的判断去掉。 从加载到显示的流程 1. 加载数据 2. 拼接HTML写入到页面 3. 检查刚刚写入的HTML中的img是否全部加载完成,如果是,进入5、否则进入4 4. 等待图片加载完成 5. 计算每个元素的位置 */ define(function(require, exports, module) { 'use strict'; var Tmpl = require('lib/tmpl/2.1.x/index.js'), $ = require('lib/jquery/1.11.x/index.js'); var waterFall = { init: function(options) { var t = this; t._container = options.container; t._template = options.template; t._colWidth = options.colWidth; t._colSpacing = options.colSpacing; t._rowSpacing = options.rowSpacing; t.dataURL = options.dataURL; t.dataType = options.dataType; t.page = options.page; t.pageEnd = options.pageEnd; t._switch = false; //计算有几列 总宽度 / (列宽 + 列间隔) t._totalCols = parseInt(t._container.width() / (t._colWidth + t._colSpacing)); // 创建用于记录每列高度的数组 t._cols = new Array(t._totalCols); // 初始化为0 for (var i = 0; i = document.documentElement.scrollHeight) { lastTime = thisTime; t._loadNext(); } } }); }, //加载器 _loadNext: function(t) { var t = this; t._switch = true; //请求数据 if (!t.trigger) { $.ajax({ url: t.dataURL, data: { page: ++t._loadingPage }, dataType:t.dataType, success: function(response){ t.trigger = t._completeLoading(response); }, error:function(){console.log('Error! 请求有误');} }); } return false; }, //加载完数据调用此函数 _completeLoading: function(result) { var t = this; if (t._loadingPage >= t.pageEnd) { $('#more').hide(); $('#loading').html('已是最后一页了喔 ^_^ ^_^
'); return true; } else { //if (!pageNum()) { t._add(result); //}; } return false; }, //添加格子 _add: function(result) { var t = this, grids = ''; //调用模板 var content = Tmpl.render(t._template, {data:result.data}); //原始定位 t._grids = $(content).css({ position: 'absolute', left: t._container.width(), top: t._container.height(), width: t._colWidth, opacity: 0 }); //把Html添加到容器 t._container.append(t._grids); // 执行一次_reposition,如果所有图片都加载完成,该方法返回true,否则返回false if ( !t._reposition() ) { // 有图片未加载完,监听onload和onerror t._grids.find('img').bind('load error', function() { this.loaded = true; // 有图片加载完成,再次执行_reposition if (t._grids) { t._reposition(); } }); } }, // 此方法用于获取高度最低的列 _getLowestCol: function() { var cols = this._cols, min = 0; for (var i = 1; i
以上就是本文的全部内容,希望对大家学习javascript程序设计有所帮助。
推荐阅读
-
javascript实现瀑布流加载图片原理_javascript技巧
-
上传图片预览JS脚本 Input file图片预览的实现示例_javascript技巧
-
JavaScript实现简单图片滚动附源码下载_javascript技巧
-
js实现延时加载Flash的方法_javascript技巧
-
javascript实现图片懒加载实例
-
js实现图片无缝滚动特效_javascript技巧
-
HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影
-
HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影
-
javascript之瀑布流图片覆盖
-
利用CSS、JavaScript及Ajax实现图片预加载的三大方法