面向对象及面向过程瀑布流

面向对象及面向过程瀑布流

什么是瀑布流布局？（思路分析）

1. 瀑布流布局的特点是等宽不等高，可以灵活展示。
2. 为了让最后一行的差距最小，从第二行开始，需要将图片放在第一行最矮的图片下面，以此类推。
3. 父元素设置为相对定位，图片所在元素设置为绝对定位。然后通过设置 top 值和 left 值定位每个元素。

面向过程：

<script>
        var box = document.querySelector('.box')
        //生成指定范围内随机数的函数
        function rdNum(min, max) {
            return Math.ceil(Math.random() * (max - min)) + min
        }
        //封装获取数组最小值的函数
        function getMin(data) {
            return Math.min.apply(null, data)
        }

        var arr = [0, 0, 0, 0]
        for (var i = 0; i < 20; i++) {
            //获取当前数组最小值
            var minVal = getMin(arr)
            //获取最小值的序列数‘index’
            var index = arr.findIndex(function (item, index) {
                return item === minVal
            })
            //生成随机数
            var rdnum = rdNum(40, 70)
            //创建相应的盒子并追加
            var son = document.createElement('div')
            son.innerText = i
            son.style.height = rdnum + 'px'
            son.style.left = index * 166 + 'px'
            son.style.top = minVal + 'px'
            box.appendChild(son)
            //数组的当前序列加上此高度
            arr[index] += rdnum
            console.log(arr)
        }
        // 设置父盒子的高度为数组最大值
        box.style.height = Math.max.apply(null, arr) + 'px'
    </script>

面相对象：

<script>
        //创建构造函数  
        function CreatPubu(father, linum, width) {
            //放置的目标盒子
            this.father = document.querySelector(father)
            //生成的列数
            this.linum = linum
            //小盒子的宽
            this.width = width
            //调用创建需求的随机瀑布流盒子的函数
            this.addinit()
            if(this.linum*this.width>this.father.offsetWidth){
                this.linum=4
                this.width=this.father.offsetWidth/this.linum
            }
        }
        //给构造函数原型增加获取随机数的函数
        CreatPubu.prototype.rdNum = function (min, max) {
            return Math.ceil(Math.random() * (max - min)) + min
        }
        //给构造函数原型增加获取数组最小值的函数
        CreatPubu.prototype.getMin = function (data) {
            return Math.min.apply(null, data)
        }
        //给构造函数原型增加获取数组最小值的序列数的函数
        CreatPubu.prototype.getIndex = function (a, b) {
             return a.findIndex(function (item) {
                return item === b
            })
        }
        //给构造函数增加创建盒子的函数
        CreatPubu.prototype.creatdiv = function (i, rdnum, minVal, index) {
            var son = document.createElement('div')
            son.innerText = i
            son.style.height = rdnum + 'px'
            son.style.left = index * ((this.father.offsetWidth - this.width * this.linum) / (this.linum - 1) + this.width) + 'px'
            son.style.top = minVal + 'px'
            this.father.appendChild(son)
        }
        //给构造函数增加创建需求的随机瀑布流盒子的函数
        CreatPubu.prototype.addinit = function () {
            //根据需要的列数创建数组
            var arr = new Array(this.linum)
            arr.fill(10)
            for (var i = 0; i < 20; i++) {
                var minVal = this.getMin(arr)
                var index = this.getIndex(arr,minVal)
                var rdnum = this.rdNum(40, 70)
                this.creatdiv(i, rdnum, minVal, index)
                arr[index] += rdnum
                console.log(arr)
            }
            this.father.style.height = Math.max.apply(null, arr) + 'px'
        }
        //实例
        new CreatPubu('.box', 4, 100)
    </script>