html5实现瀑布流效果

关注

VIP免费原创最新推荐文章于 2025-04-29 13:04:57 发布 1.2w 阅读 AI 写同款· GEO 优化 ›

H5炫酷特效系列3——瀑布流水特效这个案例模拟瀑布流水的效果，有点类似喷泉，粒子模拟的水滴会一层一层的下落，很是漂亮。效果看上去很是炫酷，代码并不是很多，几十行代码搞定，同志们直接复制运行就可以查看效果。<!DOCTYPE html> <html><head> <meta charset="utf-8"> <title>瀑布流水</title> <style type="text/css"> html, 阅读详情

先给出极客学院的一个瀑布流小例程：瀑布流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);   // 自调用，加载完一张图片后，再加载下一张图片，防止图片重叠
            }
        });