由于在网上找的相关图片瀑布流的代码,封装性都不太高,并且都不支持自适应的效果(js在初始化的时候就确定了宽度,不支持放大缩小改变宽度)
于是想着自己封装一个图片瀑布流的代码.
暂时的做法是宽度都统一,高度自适应.
等以后有时间的话,再想一下宽度是多列的思路.
源码链接:图片瀑布流
基本的思路是每个图片以绝对定位的方式一个一个的放到页面上.有一个数组记录每列的当前高度.
做完之后看一下效果不错,主页面监听页面是否滚动到了底部去加载新的图片.
但是偶尔却会出现.图片重叠的现象,非常奇怪.
一开始认为是程序可能没有读取到图片的高度.写代码监听一下图片高度
var imageHeight = dom.find('img').height();
if (imageHeight < 50) debugger;
却发现从来都没跳到断点中来.判断应该不是没有读取到图片的高度.
后来偶然间发现一个问题:虽然封装的对象中的方法:addImageList是一个一个加载图片的,不存在没有记录图片的高度,然后在对象外部页面是监听滚动条的方式去加载图片的,也就是说同一时间可能会调用多次加载图片的方法.
这个情况下就会出现一张图片已经确定好位置,但是需要在图片加载结束后读取高度,记录这个图片占用的空间之前,另外一个图片也加载在同一个位置的情况.
找到出问题的原因,剩下的就很好办了.外部不再直接调用addImageList方法.而是以堆栈的方式,将需要放置的图片放在一个对列中.
//添加图片到对列中.(推入对列中统一处理)
p.pushImages = function (opt_arr, callback) {
var self = this;
if (!(opt_arr instanceof Array)) {
opt_arr = [opt_arr];
}
for (var i = 0; i < opt_arr.length; i++) {
var obj = {
data: opt_arr[i],
callback: callback
};
self.plusImageList.push(obj);
}
};
然后在创建对象的时候,启动方法_detailImage检测是否有需要处理的图片,这样就不会在同一时间多次调用增加图片的方法,外部只是往对象内部添加数组,真正的添加图片在对象内部处理.
//处理对列中的图片
p._detailImage = function () {
var self = this;
if (self.plusImageList.length == 0) { //如果对列中没有图片,延迟100毫秒再来读取对列.
window.setTimeout(function () {
self._detailImage();
}, 100);
} else {
var temp = self.plusImageList.splice(0, 1)[0]; //取出一个图片对象.
self.addImage(temp.data, function () {
if (typeof temp.callback === 'function') temp.callback();
//继续对下一个对列中的图片进行处理.(如果让图片一张一张出来的效果可以这里加一个延迟)
window.setTimeout(function () { self._detailImage(); }, 100);
// self._detailImage();
});
}
};
这里记录一下走过的坑,以免下次再踩进去了,最终我想要做一个自定义表情包的页面,代码整理好后,再放上链接
