JS案例：瀑布流布局

pe11223

已于 2023-01-17 17:21:22 修改

阅读量160

点赞数

文章标签： javascript 前端 html

于 2023-01-17 17:20:52 首次发布

本文链接：https://blog.youkuaiyun.com/pe11223/article/details/128718675

版权

该代码示例展示了如何使用HTML和CSS创建多个等宽图片并按六列布局，同时利用JavaScript处理图片的绝对定位，确保每行的图片自动填充。在页面下拉时，能加载更多图片，每次加载量为20-30张。方法是计算每个图片的位置，根据第一行最矮图片的位置拼接后续图片。

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

需求
多个等宽的图片进行穿插排序成六列，并且在目前显示的最后一张图片显示之后，再进行下拉时能够在进行加载其他图片，每次下拉显示20-30张图片
原理
直接利用绝对定位，不做浮动，计算每个图片位置，第一行安排好后直接索取第一行最矮的位置，将下一行的拼接上去。
代码

<!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;
        }
        .items{
            width: 16.66%;
            margin: 5px 0;
            position: absolute;
        }
        .items img{
            display: inline-block;
            width:100%; 
        }

    </style>
</head>
<body>
        <div class="con" id="list">
            <div class="items"><img src="./1k5vxv.jpg" alt=""></div>
            <div class="items"><img src="./1k9ld3.png" alt=""></div>
            <div class="items"><img src="./1p3279.jpg" alt=""></div>
            <div class="items"><img src="./1p8lvw.png" alt=""></div>
            <div class="items"><img src="./1k5vxv.jpg" alt=""></div>
            <div class="items"><img src="./1k9ld3.png" alt=""></div>
            <div class="items"><img src="./1kep21.jpg" alt=""></div>
            <div class="items"><img src="./1kg679.jpg" alt=""></div>
            <div class="items"><img src="./1kmkg1.png" alt=""></div>
            <div class="items"><img src="./1kmqzw.png" alt=""></div>
            <div class="items"><img src="./1kry33.png" alt=""></div>
            <div class="items"><img src="./1kygl1.png" alt=""></div>
            <div class="items"><img src="./1kyox9.jpg" alt=""></div>
            <div class="items"><img src="./1kzpj3.png" alt=""></div>
            <div class="items"><img src="./1p3279.jpg" alt=""></div>
            <div class="items"><img src="./1p8lvw.png" alt=""></div>
      
        </div>

    <script>
        var items = document.getElementsByClassName("items");
        window.onload = function(){
            pbl();
        }
        function pbl(){
            var fullsc =document.documentElement.offsetWidth;
            var photowidth =items[0].offsetWidth;
            var col=6;
            var white = (fullsc -photowidth*col)/7;
            var le=10;
            var arr=[];
            for(i=0;i<6;i++){
                var xy ={
                    x:Math.floor((i+1)*white+photowidth*i),
                    y:le
                }
                arr.push(xy);
            }
            console.log(arr);
            for(j=0;j<items.length;j++){
                var index = getMinTop(arr);
                items[j].style.left = arr[index].x+'px';
                items[j].style.top=arr[index].y+'px';
                arr[index].y += items[j].offsetHeight + le;

            }
        }

        function getMinTop(arr){
            var minTop =arr[0].y;
            var index =0;
            for(a=0;a<arr.length;a++){
                if(arr[a].y<minTop){
                    minTop =arr[a].y;
                    index =a;
                }
            }
            return index;
        }
    </script>
</body>
</html>

效果
请添加图片描述