瀑布流

瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。

2656620511-5a4488b975f52.jpg

1、首先瀑布流所有的图片应该保持宽度一致，高度是由内容决定，进行浮动
2、通过定位 定位后确定浏览器显示区域内，一行能放多少列图片盒子。
获取页面的宽度
获取图片盒子的宽度
显示的列数 = 页面宽度/图片盒子宽度

 var wapper = document.querySelector('.wapper');
        //获得html的宽度
        var html_w = document.documentElement.clientWidth || document.body.clientWidth
        var boxs = document.querySelectorAll('.box')
        //一个盒子的宽度
        var box_w = boxs[0].offsetWidth
        //看一排最多可以放几个
        var clos = Math.floor(html_w / box_w)
     //重新测量大盒子的宽度
        wapper.style.Width = box_w * clos + 'px'

3、确定列数之后，排列第一行 第1行排列好之后，获取第1行所有图片盒子的高度
排列第2行

var arr = []
        for (var i = 0; i < boxs.length; i++) { //循环图片的长度
            if (i < clos) { //将第一排的高度取出来
                arr.push(boxs[i].offsetHeight)
            } else {
                var minH = Math.min.apply(Math, arr) //求数组里的最小的值
                var ind = arr.indexOf(minH) //求最小值的这个下标
                boxs[i].style.cssText = `position:absolute;left:${ind*box_w}px;top:${minH}px` //给每个盒子定位
                arr[ind] += boxs[i].offsetHeight //更新arr
            }

        }

4、进行滚动事件，加载数据

 var wapper = document.querySelector('.wapper');
    window.onscroll = function () {//渲染数据
        if (isok()) {
            for (var i in data.dataimg) {
                wapper.innerHTML += `
                 <div class="box">
                       <div class="prics">
                        <img src="./images/${data.dataimg[i].src}" alt="">
                       </div>
                   </div>`
            }
            html();
        };
    }
function isok() {
        var boxs = document.querySelectorAll('.box')
        //获取可视高度
        var sreen_h = document.documentElement.clientHeight || document.body.clientHeight
        //获取可视距离加上滚动条的距离
        var top = sreen_h + (document.documentElement.scrollTop || document.body.scrollTop)
        //获取最后一张图片最长的
        var last_img = boxs[boxs.length - 1].offsetTop + boxs[boxs.length - 1].clientHeight / 2
        return top > last_img ? true : false
    }