瀑布流布局

该文章详细介绍了如何使用HTML、CSS和JavaScript实现瀑布流布局,特别是在页面滚动时动态加载更多图片的功能。通过JavaScript对图片进行定位,根据屏幕宽度计算每行可容纳的图片数量,并在用户滚动页面时加载新的图片内容。

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

一、Demo

<1>.要求

多个等宽的图片进行穿插排序成六列,
并且在目前显示的最后一张图片显示之后,
再进行下拉时能够在进行加载其他图片,每次下拉显示20-30张图片。

<2>.功能

随着页面滚动条向下滚动,
这种布局还会不断加载数据块并附加至当前尾部。

二、实现原理

Js部分主要负责图片的定位
通过获取宽度,获取第一行排列图片数量,从而收集高度
再通过创建对象达到保存高度的数据,然后进行比较,得到最小高度,从而实现定位(position)

三、代码

<1>.Html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>瀑布流布局</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div class="content">
        <div>
            <img src="./Img/1.jfif" alt="">
        </div>
        <div>
            <img src="./Img/2.jfif" alt="">
        </div>
        <div>
            <img src="./Img/3.jfif" alt="">
        </div>
        <div>
            <img src="./Img/4.jfif" alt="">
        </div>
        <div>
            <img src="./Img/5.jfif" alt="">
        </div>
        <div>
            <img src="./Img/6.jfif" alt="">
        </div>
        <div>
            <img src="./Img/7.jfif" alt="">
        </div>
        <div>
            <img src="./Img/8.jpg" alt="">
        </div>
        <div>
            <img src="./Img/9.jfif" alt="">
        </div>
        <div>
            <img src="./Img/10.jfif" alt="">
        </div>
        <div>
            <img src="./Img/11.jfif" alt="">
        </div>
        <div>
            <img src="./Img/12.jfif" alt="">
        </div>
        <div>
            <img src="./Img/13.jpg" alt="">
        </div>
        <div>
            <img src="./Img/14.jfif" alt="">
        </div>
        <div>
            <img src="./Img/1.jfif" alt="">
        </div>
        <div>
            <img src="./Img/2.jfif" alt="">
        </div>
        <div>
            <img src="./Img/3.jfif" alt="">
        </div>
        <div>
            <img src="./Img/4.jfif" alt="">
        </div>
        <div>
            <img src="./Img/5.jfif" alt="">
        </div>
        <div>
            <img src="./Img/6.jfif" alt="">
        </div>
        <div>
            <img src="./Img/7.jfif" alt="">
        </div>
        <div>
            <img src="./Img/8.jpg" alt="">
        </div>
        <div>
            <img src="./Img/9.jfif" alt="">
        </div>
        <div>
            <img src="./Img/10.jfif" alt="">
        </div>
        <div>
            <img src="./Img/11.jfif" alt="">
        </div>
        <div>
            <img src="./Img/12.jfif" alt="">
        </div>
        <div>
            <img src="./Img/13.jpg" alt="">
        </div>
        <div>
            <img src="./Img/14.jfif" alt="">
        </div>
        <div>
            <img src="./Img/1.jfif" alt="">
        </div>
        <div>
            <img src="./Img/2.jfif" alt="">
        </div>
        <div>
            <img src="./Img/3.jfif" alt="">
        </div>
        <div>
            <img src="./Img/4.jfif" alt="">
        </div>
        <div>
            <img src="./Img/5.jfif" alt="">
        </div>
        <div>
            <img src="./Img/6.jfif" alt="">
        </div>
        <div>
            <img src="./Img/7.jfif" alt="">
        </div>
        <div>
            <img src="./Img/8.jpg" alt="">
        </div>
        <div>
            <img src="./Img/9.jfif" alt="">
        </div>
        <div>
            <img src="./Img/10.jfif" alt="">
        </div>
        <div>
            <img src="./Img/11.jfif" alt="">
        </div>
        <div>
            <img src="./Img/12.jfif" alt="">
        </div>
        <div>
            <img src="./Img/13.jpg" alt="">
        </div>
        <div>
            <img src="./Img/14.jfif" alt="">
        </div>
        <div>
            <img src="./Img/1.jfif" alt="">
        </div>
        <div>
            <img src="./Img/2.jfif" alt="">
        </div>
        <div>
            <img src="./Img/3.jfif" alt="">
        </div>
        <div>
            <img src="./Img/4.jfif" alt="">
        </div>
        <div>
            <img src="./Img/5.jfif" alt="">
        </div>
        <div>
            <img src="./Img/6.jfif" alt="">
        </div>
        <div>
            <img src="./Img/7.jfif" alt="">
        </div>
        <div>
            <img src="./Img/8.jpg" alt="">
        </div>
        <div>
            <img src="./Img/9.jfif" alt="">
        </div>
        <div>
            <img src="./Img/10.jfif" alt="">
        </div>
        <div>
            <img src="./Img/11.jfif" alt="">
        </div>
        <div>
            <img src="./Img/12.jfif" alt="">
        </div>
        <div>
            <img src="./Img/13.jpg" alt="">
        </div>
        <div>
            <img src="./Img/14.jfif" alt="">
        </div>
    </div>



    <script src="./index.js"></script>
</body>
</html>

<2>.Css部分

*{
    margin: 0;
    padding: 0;
}

.content{
    width: 100%;
    height: 3000px;
}
.content>div{
    float: left;
    border: 1px solid #ccc;
    padding: 10px;
}
.content>div>img{
    width: 200px;
}



<3>.Js部分


window.onload = function(){
    var content = document.getElementsByClassName('content')[0]
    var contentWidth = content.offsetWidth
    //获取宽度

    var imgs = content.children;
    var imgsWidth = imgs[0].offsetWidth
    //获取单个图片宽度

    var nums = Math.floor(contentWidth / imgsWidth);
    // console.log(nums);
    //获取一行可以排多少图片

    var arrHeight = []
    //收集第一排的所有高度

    for(var i=0; i<imgs.length;i++){
        if(i<nums){//这里都是第一行的元素
            arrHeight.push(imgs[i].offsetHeight)
        }else{
        //创建第一个元素的对象
            var obj={   
            minH:arrHeight[0],  
            minI:0
        }
            for(var j=0;j<arrHeight.length;j++){    //比较高度,获得最小高度
                if(arrHeight[j]<obj.minH){
                obj.minH = arrHeight[j],
                obj.minI = j
            }
        }
        console.log(obj);
        imgs[i].style.position="absolute"
        imgs[i].style.left= imgs[obj.minI].offsetLeft+"px"
        imgs[i].style.top = obj.minH+'px'
        arrHeight[obj.minI] = arrHeight[obj.minI]+ imgs[i].offsetHeight
        }
    }    

}

四、效果展示

瀑布流布局

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值