原生js实现瀑布流布局

实现效果就是这样

   <style>
        *{
            margin: 0;
            padding: 0;
        }
        .item{
            text-align: center;
            font-size: 18px;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>

    <script>
        //每个的宽度
        var colWidth = 200
        //计算可以容纳多少列
        var colNum = Math.floor(window.innerWidth / colWidth)
        //间隙是多少
        var jx = Math.floor((window.innerWidth - colNum*colWidth)/(colNum + 1))
        //存取数组的高度
        var saveH = []

        createDiv()
        function createDiv() {
            var doc = document.createDocumentFragment()
            for(var i = 0;i<100;i++){
                var div = document.createElement('div')
                div.innerHTML = i+1
                div.className = 'item'
                var h = Math.floor(Math.random()*100) + 200
                //随机背景颜色   0-255
                var r = Math.floor(Math.random()*256)
                var g = Math.floor(Math.random()*256)
                var b = Math.floor(Math.random()*256)

                var bgColor = "rgb("+r+","+g+","+b+")"
                div.style.backgroundColor = bgColor
                div.style.height = h+'px'
                div.style.lineHeight = h + 'px'
                div.style.width = '200px'
                doc.appendChild(div)
            }
            document.body.appendChild(doc)

            show()
        }

        //实现瀑布流
        function show() {
            //遍历所有的item
            var item = document.querySelectorAll('.item')
            for(var i = 0;i<item.length;i++){
                //需要colNum列
                if(i<colNum){
                    item[i].style.top = jx + 'px'
                    item[i].style.left = jx*(i+1)+ colWidth*i + 'px'
                    //存取高度
                    saveH.push(jx+item[i].offsetHeight)
                }else{ //找到高度最小的那一列
                    var index = getMin(saveH)
                    item[i].style.top = jx+ saveH[index] + 'px'
                    item[i].style.left = jx*(index+1)+ colWidth*index + 'px'

                    //修改存储高度的数组
                    saveH[index] = saveH[index] + jx+item[i].offsetHeight
                }
            }
        }

        /**
         * 获取数组里的最小值的下标
         *
         */

        function getMin(arr) {
            var min = arr[0]
            var curIndex = 0
            for(var i =0;i<arr.length;i++){
                if(arr[i] < min){
                    min = arr[i]
                    curIndex = i
                }
            }
            return curIndex
        }

    </script>