35 瀑布流分析

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

- 获取页面宽度

- 获取图片盒子的宽度

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

column = pageWidth / itemWidth

------------------------

显示美观 一般都会加一个空隙

- 显示的列数 = 页面宽度 / （图片盒子宽度 + 间隙）

- column = pageWidth / (itemWidth + gap)

------------------------------

确定列数之后，排列第一行

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

- 知道在第1行之后，动态设置每个盒子的left值就能排好第1行

- left=i*(itemWidth + gap)

-----------------------------------------

第一行排列好之后，获取第1行所有图片盒子的高度

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

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

排列第2行

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

- 此时的left值就是高度最小列的offsetLeft，top值就是：第1行高度最小列的高度（为了布局美观可以加上上下间隙gap）

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

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

改变最小列当前高度

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

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

瀑布流的实现

var box=document.getElementById("box")
var items=box.children
var gap=10
window.onload = function(){
    waterFall()
    function waterFall(){
        //视口的宽度
        var pageWidth = getClient().width
        var itemWidth = items[0].offsetwidth
        var columns = parseInt(pageWidth / (itemWidth + gap))
        
        var arr=[]
        for(var i=0;i<items.length;i++){
            if(i<columns){
                items[i].style.top=0
                items[i].style.left=i*(itemWidth+gap)+'px'
                arr.push(items[i].offsetHeight)
            }else{
                //其他行
                //找到第一行的最小高度和最小索引
                var minHeght=arr[0]
                var index=0
                for(var j=0;j<arr.length;j++){
                    if(minHeght>arr[j]){
                        minHeght=arr[j]
                        index=j
                    }    
                }
                items[i].style.left=items[index].offsetLeft+'px'
                items[i].style.top=minHeght+gap+'px'
                arr[index]+=items[i].offsetHeight + gap
            }
        }
    }
}

 滚动加载更多图片

window.onscroll=function(){
    //如果图片到了视野当中
    if(getClient().height + getScrollTop() >= items[items.length-1].offsetTop){
        //最后一张图片都没有了 肯定要加载其他的图片
        var datas=[
            "./img/1.jpg",
            "./img/2.jpg"
        ]
        for(var i=0;i<datas.length;i++){
            var div=document.createElement('div')
            div.className='item'
            div.innerHTML='<img src="'+datas[i]+'" alt="">'
            box.appendChild(div)
        }
        waterFall()
    }
}

//得到滚动条的滚动高度
function getScrollTop(){
    return window.pageYOffset || document.documentElement.scrollTop
}