html5实现瀑布流效果

最新推荐文章于 2023-02-21 11:01:28 发布

原创

最新推荐文章于 2023-02-21 11:01:28 发布 · 1.2w 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #javascript #瀑布流

本文通过一个HTML5瀑布流DEMO介绍如何实现瀑布流布局。在项目实践中遇到图片重叠、两列布局、分页加载等问题，并提供了解决方案。详细分析了图片加载时机、布局调整和优化页面加载速度的策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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