html5实现瀑布流效果

本文通过一个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);   // 自调用,加载完一张图片后,再加载下一张图片,防止图片重叠
            }
        });


评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值