瀑布流式布局

最新推荐文章于 2025-10-06 16:53:59 发布

原创最新推荐文章于 2025-10-06 16:53:59 发布 · 384 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css #前端

该代码示例展示了如何使用HTML、CSS和JavaScript实现一个六列等宽的图片瀑布流布局，并在页面滚动到底部时动态加载更多图片，每次加载20-30张。主要涉及到的CSS样式包括居中布局、浮动元素以及图片尺寸控制，JavaScript部分则处理滚动事件和瀑布流的重新排列。

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

实现原理：

html部分：添加图片
在这里插入图片描述

样式部分：让最外层盒子居中，内部添加浮动。对内部盒子添加边距。图片设置宽度控制列数
在这里插入图片描述
js部分：waterFall函数实现图片瀑布流排列。onscroll事件部分通过添加图片实现滚动加载图片，并再次调用waterFall函数实现瀑布流式排列

在这里插入图片描述

完整代码：

<!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>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            margin: 0 auto;
            position: relative;
        }
        .item{
            float: left;
            padding: 15px 0 0 15px;
        }
        .pict{
            padding: 10px;
            border: 1px solid #999;
        }
        .pict img{
            width: 300px;
            height: auto;
        }
    </style>
</head>
<body>
    <div class="container" id="container1">
        <div class="item">
            <div class="pict">
                <img src="./img/1.jpg" alt="">
            </div>
        </div>
        <div class="item">
            <div class="pict">
                <img src="./img/2.jpg" alt="">
            </div>
        </div>
        <div class="item">
            <div class="pict">
                <img src="./img/3.jpg" alt="">
            </div>
        </div>
        <div class="item">
            <div class="pict">
                <img src="./img/4.jpg" alt="">
            </div>
        </div>
        <div class="item">
            <div class="pict">
                <img src="./img/5.jpg" alt="">
            </div>
        </div>
        <div class="item">
            <div class="pict">
                <img src="./img/7.jpg" alt="">
            </div>
        </div>
        <div class="item">
            <div class="pict">
                <img src="./img/8.jpg" alt="">
            </div>
        </div>
        <div class="item">
            <div class="pict">
                <img src="./img/9.jpg" alt="">
            </div>
        </div>
        <div class="item">
            <div class="pict">
                <img src="./img/10.jpg" alt="">
            </div>
        </div>
        <div class="item">
            <div class="pict">
                <img src="./img/11.jpg" alt="">
            </div>
        </div>
        <div class="item">
            <div class="pict">
                <img src="./img/6.jpg" alt="">
            </div>
        </div>
        <div class="item">
            <div class="pict">
                <img src="./img/7.jpg" alt="">
            </div>
        </div>
        <div class="item">
            <div class="pict">
                <img src="./img/8.jpg" alt="">
            </div>
        </div>
        <div class="item">
            <div class="pict">
                <img src="./img/9.jpg" alt="">
            </div>
        </div>
        <div class="item">
            <div class="pict">
                <img src="./img/10.jpg" alt="">
            </div>
        </div>
        <div class="item">
            <div class="pict">
                <img src="./img/11.jpg" alt="">
            </div>
        </div>
        <div class="item">
            <div class="pict">
                <img src="./img/6.jpg" alt="">
            </div>
        </div>
        <div class="item">
            <div class="pict">
                <img src="./img/7.jpg" alt="">
            </div>
        </div>
        <div class="item">
            <div class="pict">
                <img src="./img/8.jpg" alt="">
            </div>
        </div>
        <div class="item">
            <div class="pict">
                <img src="./img/9.jpg" alt="">
            </div>
        </div>
        <div class="item">
            <div class="pict">
                <img src="./img/10.jpg" alt="">
            </div>
        </div>
        <div class="item">
            <div class="pict">
                <img src="./img/11.jpg" alt="">
            </div>
        </div>
        <div class="item">
            <div class="pict">
                <img src="./img/6.jpg" alt="">
            </div>
        </div>
        <div class="item">
            <div class="pict">
                <img src="./img/7.jpg" alt="">
            </div>
        </div>
        <div class="item">
            <div class="pict">
                <img src="./img/8.jpg" alt="">
            </div>
        </div>
        <div class="item">
            <div class="pict">
                <img src="./img/9.jpg" alt="">
            </div>
        </div>
        <div class="item">
            <div class="pict">
                <img src="./img/10.jpg" alt="">
            </div>
        </div>
        <div class="item">
            <div class="pict">
                <img src="./img/11.jpg" alt="">
            </div>
        </div>
        <div class="item">
            <div class="pict">
                <img src="./img/6.jpg" alt="">
            </div>
        </div>
        <div class="item">
            <div class="pict">
                <img src="./img/7.jpg" alt="">
            </div>
        </div>
        <div class="item">
            <div class="pict">
                <img src="./img/8.jpg" alt="">
            </div>
        </div>
        <div class="item">
            <div class="pict">
                <img src="./img/9.jpg" alt="">
            </div>
        </div>
        <div class="item">
            <div class="pict">
                <img src="./img/10.jpg" alt="">
            </div>
        </div>
        <div class="item">
            <div class="pict">
                <img src="./img/11.jpg" alt="">
            </div>
        </div>
        <div class="item">
            <div class="pict">
                <img src="./img/6.jpg" alt="">
            </div>
        </div>
        <div class="item">
            <div class="pict">
                <img src="./img/7.jpg" alt="">
            </div>
        </div>
        <div class="item">
            <div class="pict">
                <img src="./img/8.jpg" alt="">
            </div>
        </div>
        <div class="item">
            <div class="pict">
                <img src="./img/9.jpg" alt="">
            </div>
        </div>
        <div class="item">
            <div class="pict">
                <img src="./img/10.jpg" alt="">
            </div>
        </div>
        <div class="item">
            <div class="pict">
                <img src="./img/11.jpg" alt="">
            </div>
        </div>
    </div>
<script>
    window.onload=function(){
       
        window.onscroll=function(){
        var container=document.getElementById("container1")
        var oitem=document.createElement("div")
        oitem.className='item';
        var opict=document.createElement("div")
        opict.className="pict";
        var oimg=document.createElement("img")
        oimg.src="img/12.jpg";

        container.appendChild(oitem);
        oitem.appendChild(opict);
        opict.appendChild(oimg);
        waterFall();
        }
        waterFall();
    }
function waterFall(){
    var container=document.getElementById("container1");
    var clientwidth=document.documentElement.clientWidth;
    var allItem=document.getElementsByClassName("item");
    var onewidth=allItem[0].offsetWidth;
    var num=Math.floor(clientwidth/onewidth);
    container1.style.width=num*onewidth+"px";

    var hzheight=[];

    for(var i=0;i<allItem.length;i++){
        if(i<num){
            hzheight.push(allItem[i].offsetHeight);
        }else{
            var indexes=minArray(Math.min(...hzheight),hzheight)

            allItem[i].style.position="absolute";
            allItem[i].style.left=indexes*onewidth+"px"
            allItem[i].style.top=Math.min(...hzheight)+"px";
            hzheight[indexes]+=allItem[i].offsetHeight;
        }
    }

function minArray(min,hzheight){
    for(var i=0;i<hzheight.length;i++){
        if(hzheight[i]==min){
            return i;
        }
    }
}
}

</script>
</body>
</html>