javascript实现瀑布流加载图片原理
更新时间：2016年02月02日 10:56:27 作者：带上饼干
这篇文章主要为大家介绍了javascript实现瀑布流加载图片效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
讲一下大概的原理吧
功能描述：
- 根据不同菜单的属性值分别加载不同的数据
- 下拉滚动条到一定位置预加载图片，滚动条拉到最底下的时候渲染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;
});
}
其次开发过程中遇到的难题是：因为如上图所示，鼠标移动到菜单栏需要切换图片列表，并且分别需要用瀑布流加载不同类型的数据。所以要处理在切换页面的时候如何才能做到每个页面只执行一次代码请求接口，而不需要每一次切换都重新请求数据接口，仅仅执行切换显示图片列表的操作就可以了。
考虑到每一个菜单都有一个自定义属性，所以这个问题轻易地解决了：建立一个对象来记录当前菜单是否已经执行过代码，如果没有就执行请求数据 。
var isLoad = {};//是否载入过
labelType.mouseover(function() {
var i = $(this).index();
var api = _this.attr('api');//接口标识
if(! isLoad[ api ]){
isLoad[ api ] = i;
loadData(wrapper, api);
}
});
以下为全部代码：
html：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
*{margin:0;padding:0;}
ul,li{ list-style-type:none;}
li img{width:100%;list-style:none;}
</style>
</head>
<body>
<div class="photo_box">
<ul id="container" style="border:1px solid #000;width:80%;height:600px;overflow:hidden;margin:0 auto;position: relative;">
</ul>
<div id="loading" class="loading" style="text-align: center;margin-top: 20px;font-size: 1.2em;">加载中...</div>
<div id="more" class="more"style="text-align: center;margin-top: 20px;font-size: 1.2em;"><input type="button" value="更 多" id="clear" /></div>
</div>
<script type="text/javascript" src="../../lib/seajs/sea.js"></script>
<script type="text/javascript" src="../../lib/base/1.0.x/base.js"></script>
<script type="text/javascript">
seajs.use(['lib/jquery/1.11.x/index.js', '_example/waterFall_1.1/waterfall.js'], function($, waterFall) {
waterFall.init({
container: $('#container'),
dataURL: 'http://www.woxiu.com/index.php?action=Index/Main&do=ApiZhuboGrade',
dataType: 'jsonp',
template: '<% for (var i = 0; i < data.length; i++) { %>' +
'<li style="display: none;">' +
'<img src=" <%-data[i].room_img%> ">' +
'</li>' +
'<% } %>',
colWidth: 200,
colSpacing: 10,
rowSpacing: 15,
page: 1,
pageEnd: 8,
});
// 限制同时展示的页数
var loadCounter = 1;
function pageNum(){
if (loadCounter >= 3) {
$('#more').show();
$('#loading').hide();
return true;
} else {
loadCounter++;
$('#more').hide();
$('#loading').show();
}
return false;
}
$('#clear').click(function() {
loadCounter = 1;
waterFall._loadNext();
});
});
</script>
</body>
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 < t._cols.length; i++) {
t._cols[i] = 0;
}
t._loadingPage = options.page || 0;
t._loadNext(options);
//下拉滚动条加载
var lastTime = new Date().getTime();
$(window).scroll(function() {
if ( !t._switch ) {
//判断是否滚动过快,在ie下
var thisTime = new Date().getTime();
if (thisTime - lastTime < 50) {
console.log(thisTime - lastTime);
lastTime = thisTime;
return;
}
if ($(window).scrollTop() + $(window).height() >= 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('<p>已是最后一页了喔 ^_^ ^_^</p>');
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 < cols.length; i++) {
if (cols[i] < cols[min]) {
min = i;
}
}
return min;
},
//定位
_reposition: function() {
var t = this, allImgsLoaded = true;
// 检测图片是否全部加载完成
t._grids.find('img').each(function(i, img) {
if (!img.loaded && !img.complete) {
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中，我们应该尽可能的用局部变量来代替全局变量，这句话所有人都知道，可是这句话是谁先说的？为什么要这么做？有什么根据么？2009-04-04
本文主要介绍了js前端URL含有特殊字符的转码的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-06-06
今天小编就为大家分享一篇layui禁用侧边导航栏点击事件的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要介绍了JS取得绝对路径的实现代码,需要的朋友可以参考下2015-01-01
最近在用自定义组件搭建小程序,简单记录下步骤，所以这篇文章主要给大家介绍了关于微信小程序新手入门之自定义组件使用的相关资料，需要的朋友可以参考下2021-05-05
2008年有啊第一次性能优化时，我们曾用textarea来存贮需要懒惰渲染的节点2012-01-01
Angularjs结合Bootstrap制作的一个TODO List
这篇文章主要介绍了Angularjs结合Bootstrap制作的一个TODO List 的相关资料，感兴趣的小伙伴们可以参考一下2016-08-08
在写js脚本的时候我们必须对一件事保持警惕，就是避免异常的发生。在本篇文章里面，我想谈谈一部分类型检测，有需要的可以参考学习。2016-07-07
JavaScript前端中的伪类元素before和after使用详解
before和after也算是css里面最常见的元素了，而我却一直不太了解，再不学一下就真的太不像话了。所以学习一下，需要的朋友们下面随着小编来一起学习吧2023-02-02
这篇文章主要为大家详细介绍了js canvas实现5张图片合成一张图片，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
最新评论