先给出极客学院的一个瀑布流小例程:瀑布流demo。这是个实现瀑布流很典型的demo。这个例子的实现思路是这样的:父级元素container采用相对定位,子元素container使用绝对定位,用函数imgLocation()计算位置坐标的,有兴趣的童鞋可以参考。
刚好我要做个整脏治乱曝光台的的项目,需要用到瀑布流的效果,也就参照了这个例子。下面记录下我做这个项目时碰到的问题。项目地址:整脏治乱曝光台。
1.图片重叠的问题
当我参照上述的demo实现瀑布流时,发现多张图片叠加在一起。后来分析发现是由于图片尚未完全加载到DOM,js就执行了高度计算函数,导致图片叠加在一起,为了解决这个问题,就需要在js中判断上一张图片是否已经加载完成,只有上一张图片加载完成,再加载下一张图片。代码如下:
$(loadingImgId).load(function(){ // 只有当前图片加载完后,才能计算坐标,否则图片会重叠在一起
refreshBoxHeightArr(BoxHeightArr, (currentPage - 1)*10 + index);
$("#players")[0].style.height = Math.max.apply(null, BoxHeightArr) + "px"; // 为了列表元素和加载提示不重合,需要实时更新players的高度
if (index == (playerList.length - 1)){
index++;
}
else if (index < (playerList.length - 1)){
index++;
addList(playerList, index, BoxHeightArr, currentPage); // 自调用,加载完一张图片后,再加载下一张图片,防止图片重叠
}
});