瀑布流布局

最新推荐文章于 2025-06-09 21:53:43 发布

csdn_nevermore

最新推荐文章于 2025-06-09 21:53:43 发布

阅读量330

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.youkuaiyun.com/csdn_nevermore/article/details/128655468

版权

该文章展示了如何使用CSS和JavaScript创建一个六列等宽的图片展示布局，实现瀑布流效果。当用户滚动到页面底部时，通过JavaScript动态加载更多图片，每次加载20-30张，保证了流畅的用户体验。

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

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

原理：
首先设置固定的宽和padding在页面中一行六个；
接着通过js获取到一个关于图片的数组，并定义一个random函数使其可以在一个范围内取值
通过循环给其中的每一个元素都附上随机的宽高，实现瀑布流效果
懒加载：
滚动的距离加窗口的高度如果等于页面总高度，那就进行innerhtml的插入并对插入的图片进行上述的瀑布流高度随机设定

<!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>
        * {
            padding: 0;
            list-style: none;
            text-decoration: none;
        }

        body {
            margin: 5px;
        }

        .bigbox {
            column-gap: 0;
            column-count: 6;
        }

        img {
            display: block;
            width: 326px;
            padding: 5px;
            margin-right: 5px;
            height: 200px;
        }
    </style>
</head>

<body>
    <div class="bigbox">
        <div class="container" id="listal">

            <div class="item"><img src="https://picsum.photos/160/460?random=1" alt=""></div>
            <div class="item"><img src="https://picsum.photos/260/460?random=2" alt=""></div>
            <div class="item"><img src="https://picsum.photos/360/460?random=3" alt=""></div>
            <div class="item"><img src="https://picsum.photos/460/460?random=4" alt=""></div>
            <div class="item"><img src="https://picsum.photos/560/460?random=5" alt=""></div>
            <div class="item"><img src="https://picsum.photos/660/460?random=6" alt=""></div>
            <div class="item"><img src="https://picsum.photos/760/460?random=7" alt=""></div>
            <div class="item"><img src="https://picsum.photos/360/160?random=8" alt=""></div>
            <div class="item"><img src="https://picsum.photos/360/260?random=9" alt=""></div>
            <div class="item"><img src="https://picsum.photos/360/360?random=10" alt=""></div>
            <div class="item"><img src="https://picsum.photos/360/460?random=11" alt=""></div>
            <div class="item"><img src="https://picsum.photos/360/560?random=12" alt=""></div>
            <div class="item"><img src="https://picsum.photos/360/660?random=13" alt=""></div>
            <div class="item"><img src="https://picsum.photos/360/760?random=14" alt=""></div>
            <div class="item"><img src="https://picsum.photos/360/860?random=15" alt=""></div>
            <div class="item"><img src="https://picsum.photos/360/960?random=16" alt=""></div>
            <div class="item"><img src="https://picsum.photos/320/460?random=17" alt=""></div>
            <div class="item"><img src="https://picsum.photos/310/560?random=18" alt=""></div>
            <div class="item"><img src="https://picsum.photos/310/360?random=19" alt=""></div>
            <div class="item"><img src="https://picsum.photos/310/660?random=20" alt=""></div>
            <div class="item"><img src="https://picsum.photos/310/760?random=21" alt=""></div>
            <div class="item"><img src="https://picsum.photos/310/860?random=22" alt=""></div>
            <div class="item"><img src="https://picsum.photos/210/360?random=23" alt=""></div>
        </div>



    </div>


    <script>

        var bigbox = document.querySelector('.bigbox')
        var tupian = document.querySelector('.container')
        var otupianitems = document.querySelectorAll(".container .item img")
        makeheight()

        function makeheight() {
            var otupianitems = document.querySelectorAll(".container .item img")
            for (i = 0; i < otupianitems.length; i++) {
                var imgheight = getrandom(300, 900)
                otupianitems[i].style.height = imgheight + 'px'

            }
        }



        function getrandom(n, m) {
            return Math.floor(Math.random() * (m - n + 1) + n)
        }
        isloading = false
        window.onscroll = function () {
            var scrollTop = document.documentElement.scrollTop ||
                document.body.scrollTop

            var windowHeight = document.documentElement.clientHeight
            var list = document.body.scrollHeight

            if (isloading) return

            if (Math.round(windowHeight + scrollTop) >= list) {


                console.log("daodi")
                tupian.innerHTML += '<div class="item"><img src="https://picsum.photos/160/460?random=1" alt=""></div><div class="item"><img src="https://picsum.photos/260/460?random=2" alt=""></div><div class="item"><img src="https://picsum.photos/360/460?random=3" alt=""></div><div class="item"><img src="https://picsum.photos/460/460?random=4" alt=""></div><div class="item"><img src="https://picsum.photos/560/460?random=5" alt=""></div><div class="item"><img src="https://picsum.photos/660/460?random=6" alt=""></div><div class="item"><img src="https://picsum.photos/760/460?random=7" alt=""></div><div class="item"><img src="https://picsum.photos/360/160?random=8" alt=""></div><div class="item"><img src="https://picsum.photos/360/260?random=9" alt=""></div><div class="item"><img src="https://picsum.photos/360/360?random=10" alt=""></div><div class="item"><img src="https://picsum.photos/360/460?random=11" alt=""></div><div class="item"><img src="https://picsum.photos/360/560?random=12" alt=""></div><div class="item"><img src="https://picsum.photos/360/660?random=13" alt=""></div><div class="item"><img src="https://picsum.photos/360/760?random=14" alt=""></div><div class="item"><img src="https://picsum.photos/360/860?random=15" alt=""></div><div class="item"><img src="https://picsum.photos/360/960?random=16" alt=""></div><div class="item"><img src="https://picsum.photos/320/460?random=17" alt=""></div><div class="item"><img src="https://picsum.photos/310/560?random=18" alt=""></div><div class="item"><img src="https://picsum.photos/310/360?random=19" alt=""></div><div class="item"><img src="https://picsum.photos/310/660?random=20" alt=""></div><div class="item"><img src="https://picsum.photos/310/760?random=21" alt=""></div><div class="item"><img src="https://picsum.photos/310/860?random=22" alt=""></div><div class="item"><img src="https://picsum.photos/210/360?random=23" alt=""></div> '
                var list = document.body.scrollHeight
                makeheight()
            }
        }


    </script>
</body>

</html>