原生js书写瀑布流

最新推荐文章于 2022-08-25 10:53:35 发布

weixin_43312083

最新推荐文章于 2022-08-25 10:53:35 发布

阅读量80

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_43312083/article/details/104827820

版权

前端专栏收录该内容

85 篇文章 5 订阅

订阅专栏

浏览网页的时候经常会遇到瀑布流布局的网站。也许有些读者不了解瀑布流。瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。比如下面图片的效果，就是一个典型的瀑布流。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>原生js瀑布流</title>
    <style>
        div{
            background: #ccc;
            width: 200px;
            position: absolute;
            transition:0.5s;
        }
    </style>
</head>
<body>
<script type="text/javascript">
    createDiv ()
    function createDiv () {
        for (var i = 0; i < 20; i++) {
            var div = document.createElement('div');
            var rnd = Math.floor(Math.random()*300+50)   //div的高度在50到350之间
            div.style.height = rnd + "px";
            div.innerHTML = i;
            document.body.appendChild(div);
        };
        change()
    }

    function change() {
        var aDiv = document.getElementsByTagName('div');
        // alert(aDiv.length);
        var windowCW = document.documentElement.clientWidth;  //窗口视口的宽度
        var n = Math.floor(windowCW/210);                     //一行能容纳多少个div，并向下取整
        if (n<=0) {return};
        // alert(n);
        var t = 0;
        var center = (windowCW - n*210)/2;                   //居中
        var arrH = [];                                       //定义一个数组存放div的高度
        for (var i = 0; i < aDiv.length; i++) {
            var j = i%n;

            if (arrH.length==n) {                    //一行排满n个后到下一行
                var min = findMin(arrH);              //从最“矮”的排起，可以从下图的序号中看得出来，下一行中序号是从矮到高排列的
                aDiv[i].style.left =center + min*210 + "px";
                aDiv[i].style.top = arrH[min]+10 + "px";
                arrH[min] += aDiv[i].offsetHeight + 10;
                // alert(min);
            }else{
                arrH[j] = aDiv[i].offsetHeight;
                aDiv[i].style.left =center + 200*j+10*j + "px";
                aDiv[i].style.top = 0;
            }

        };
    }
    window.onresize = function(){      //窗口改变也调用函数
        change();
    }
    window.onscroll= function  () {
        // 页面总高度
        var bodyHeight = document.documentElement.offsetHeight;
        // 可视区高度
        var windowHeight = document.documentElement.clientHeight;
        //滚动条的高度
        var srcollTop = document.documentElement.scrollTop || document.body.scrollTop;
        var srcollH = document.body.scrollHeight;
        // alert(srcollH);
        if (srcollTop+windowHeight  >= srcollH-20) {
            createDiv();
        };
    }

    function findMin(arr) {
        var m = 0;
        for (var i = 0; i < arr.length; i++) {
            m = Math.min(arr[m], arr[i]) == arr[m] ? m : i;
        }
        return m;
    }
</script>
</body>