图片瀑布流制作.

由于在网上找的相关图片瀑布流的代码,封装性都不太高,并且都不支持自适应的效果(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();
        });
    }
};

这里记录一下走过的坑,以免下次再踩进去了,最终我想要做一个自定义表情包的页面,代码整理好后,再放上链接

标签: none

添加新评论