js面向对象实现瀑布流

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            position: absolute;
        }
    </style>
</head>

<body>

</body>

</html>
<script>
    class waterfall {
        creatDiv() {
            for (let i = 0; i < 14; i++) {//循环图片
                let odiv = document.createElement("div");//创建div
                let rad = Math.round(Math.random() * 300 + 50);//取50-350之间的随机数
                odiv.style.height = rad + "px";//给div设置随机高度
                odiv.style.backgroundImage = "url(./img/" + i + ".jpg)";//给div设置图片背景
                odiv.style.backgroundSize = "200px " + rad + "px";//给div的背景图设置大小(如:200px 330px)
                odiv.style.left = odiv.offsetWidth + 10 + "px";//设置每个div的宽度加间隔
                document.body.appendChild(odiv);//将创建的div加到body中
                this.change();//创建的同时执行change();
            }
        }
        change() {
            let odiv = document.querySelectorAll("div");//得到所有的div
            let n = Math.floor(window.innerWidth / 210);//判断一行可以放几个div
            let arrH = [];//创建空数组用来装第一行的高度
            for (let i = 0; i < odiv.length; i++) {//循环每个div
                if (n == arrH.length) {//第一行之外的
                    let minIndex = this.minIndex(arrH);//找到数组中最小值的索引
                    odiv[i].style.left = minIndex * 210 + "px";//将div加在最小高度div的下面
                    odiv[i].style.top = arrH[minIndex] + 10 + "px";//将div加在最小高度div的下面
                    arrH[minIndex] += odiv[i].offsetHeight;//将每次加的最小div的高度累加
                } else {//判断第一行,将前六个的div高度加在数组中
                    odiv[i].style.top = 0 + "px";//第一行div的Top
                    odiv[i].style.left = i * 210 + "px";//第一行div的left
                    arrH[i] = odiv[i].offsetHeight;//数组前六个为前6个div的高度
                }
            }
        }
        minIndex(a) {//找数组中的最小值
            let minIndex = 0
            for (let i = 0; i < a.length; i++) {
                if (a[i] < a[minIndex]) {
                    minIndex = i;
                }
            }
            return minIndex;
        }
        onscroll() {
            let that = this;
            window.onscroll = function () {//鼠标滚动事件,前提是有滚动条产生时才能出发该事件
                let scTop = document.body.scrollTop || document.documentElement.scrollTop;
                if (scTop > 10) {
                    that.creatDiv();
                }
            }
        }
    }
    let wf = new waterfall();
    wf.creatDiv();
    wf.change();
    wf.onscroll()
</script>
js面向对象实现瀑布流

js面向对象实现瀑布流

上一篇:Error: Cannot find module 'webpack-merge'


下一篇:layui表格(table)列中原样显示html或者xml