原生 JavaScript 瀑布流

小程的坏习惯

已于 2022-08-30 15:17:27 修改

阅读量52

点赞数 1

分类专栏：原生React.js 文章标签： javascript html

于 2022-05-12 09:59:45 首次发布

本文链接：https://blog.csdn.net/weixin_68903201/article/details/124725016

版权

原生React.js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、原生 JavaScript 瀑布流

<!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;

        }



        .waterfall {

            width: 100vw;

            height: 100vh;

        }



        .waterfall-container {

            width: 25vw;

            box-sizing: border-box;

            /* border: 1px solid #000; */

            border-right: 10px solid #fff;

            border-left: 10px solid #fff;

            float: left;

            /* background-color: pink; */

        }



        .waterfall-item {

            width: 100%;

            /* height: 200px; */

            background-color: pink;

            margin-bottom: 20px;

        }

    </style>

</head>



<body>

    <div class="waterfall">

        <div class="waterfall-container">

            <!-- <div class="waterfall-item"></div> -->

        </div>

        <div class="waterfall-container">



        </div>

        <div class="waterfall-container">



        </div>

        <div class="waterfall-container">



        </div>

    </div>

    <script>

        function rnd(n, m) {

            return parseInt(Math.random() * (m - n) + n);

        }

        var aUl = document.querySelectorAll('.waterfall-container');

        function creatDiv() {

            var oDiv = document.createElement('div');

            oDiv.className = 'waterfall-item';

            oDiv.style.height = rnd(200, 400) + 'px';

            oDiv.style.background = `rgb(${rnd(0, 256)},${rnd(0, 256)},${rnd(0, 256)})`

            return oDiv;

        }

        function createDiv20() {

            for (var i = 0; i < 20; i++) {

                var oDiv = creatDiv();

                var arr = []

                for (var j = 0; j < aUl.length; j++) {

                    arr.push(aUl[j]);

                }

                arr.sort(function (ul1, ul2) {

                    return ul1.offsetHeight - ul2.offsetHeight

                })

                // console.log(arr);

                arr[0].appendChild(oDiv)

            }

        }

        createDiv20()

        // console.log(rnd(1, 100))

        document.onscroll = function () {

            var scrollTop = document.documentElement.scrollTop;

            var viewHeight = document.documentElement.clientHeight;

            var bodyHeight = document.body.scrollHeight;

            console.log(scrollTop + viewHeight, bodyHeight);

            if (Math.ceil(scrollTop + viewHeight) >= bodyHeight) {

                createDiv20()

            }

        }



    </script>

</body>



</html>