瀑布流和滚动加载

1：思路

定位后确定浏览器显示区域内，一行能放多少列图片盒子。

●获取页面的宽度

●获取图片盒子的宽度

●显示的列数=页面宽度/图片盒子宽度

●显示美观一般都会加一个空隙，显示的列数=页面宽度/(图片盒子宽度+间隙)column = pageWidth 1 (itemWidth + gap);

●下面还有很多图片盒子，我们先要排列第1行，所以在for循环里就要判断-下，当i(所有图片盒子的索引) <column(显示列数)的时候，说明在第1行;

●知道在第1行之后，动态设置每个图片盒子的left值就能排好第1行，left=i* ( itemWidth+ gap );

●第1行排列好之后，获取第1行所有图片盒子的高度，需要定义一个数组arr,将获取到的高度存在数组中，因为第2行排列的时候需要考虑top值，此时只能根据第1行图片盒子的高度来设置;

●获取图片高度的时候要注意，程序必须写在入口函数onload里面，因为图片的加载特性是:等页面都加载完之后才去请求加载，所以不写在入口函数里可能会出现高度获取不到的情况。

●排列第2行，获取到刚刚数组中，高度最小的那一列，将第2行的第1个图片盒子放置在它的下方;

●此时的left值就是高度最小列的offsetLeft; top值就是:第1行高度最小列的高度(为了布局美观可以加上上下间隙gap)。

●记录下高度最小列的索引index，后面计算会用到;

●设置完成之后，会发现后面所有的图片都叠在这个高度最小列的下面，原因就是此时的最小列高度没有改变，应该加上下面图片的高度，得出一个新高度。

●此时的这一列高度其实已经发生改变了，所以需要将新高度赋值给数组

●当前高度最小列的高度=当前高度最小列的高度+间隙+下面图片盒子的高度

2：代码

ps：此代码，只有js部分，不全，仅作为提供思路

  window.onload = function () {
            waterFall()

            function waterFall() {
                //视口的宽度
                var pageMidth = getClient().width
                var itenMidth = items[e].offsetWidth
                //column = pageWidth / itemwidth
                var columns = parseInt(pageWidth / (itenWidth + gap))
                // 里面放的是高度的值
                var arr = []
                for (var i = 0; 1 < items.Length; 1++) {
                    if (1 < colunns) {
                        //确定第一行
                        itens[i].style.top = 0
                        itens[1].style.Left = (itenlidth + gap) * i + 'px'
                        arr.push(items[i].offsetHeight)
                    } else {
                        // 其他行，找到第一行高度，最小的索引
                        var minHeight = arr[e]
                        var index = 0
                        for (var j = 0; j < arr.length; j++) {
                            if (minHeight > arr[j]) {
                                minHeight = arrl[j]
                                index = j
                            }
                        }
                        //做什么
                        //设置下一行第一个盒子的位置第张图片的位置
                        items[i].style.top = arr[index] + gap + 'px '
                        //left
                        items[1].style.left = items[index].offsetleft + 'px'
                        arr[index] = arr[index] + items[i].offsetHeight + gap
                    }
                }
            }
            // 滚动加载图片
            window.onscroll = function () {
                // 时机如何把握
                if (getClient().height + getScollTop() >= items[items.length - 1].offsetTop) {
                    // 最后一张图片都没了，要加载其他图片现形
                    // 假设从后端获取的图片
                    var datas = [
                        "./img1.jpg",
                        "./img2.jpg",
                        "./img3.jpg",
                        "./img4.jpg",
                        "./img5.jpg",
                        "./img6.jpg",
                        "./img7.jpg",
                    ]
                    for (var i = 0; i < datas.length; i++) {
                        var div = document.createElement('div')
                        div.className = 'item'
                        div.innerHTML = '<img src=" ' + datas[i] + '">'
                        box,appendChild(div)
                    }
                    waterFall()
                }
            }
        }

        function getScollTop() {
            return window.pageYOffset || document.documentElement.scroll
        }