js 图片瀑布流

思路：

• html循环展示即可，只需对图片absolute的左边距和上边距操作；
• 声明一个数组，若展示5列图片，就只有5个值，这5个值是第一行的5张图片高度的值，当展示第6/N图片时，第6/N张图片会展示在最小值得那一列， 当前图片的高度与数组内最小值累加；

(function(){
    
    var allItems = document.getElementsByClassName('wf-item');
    var arr = [];

    var init = function () {
        setImgPos();
    }

    function setImgPos(){
        
        for(var i = 0; i < allItems.length; i++){
            var item = allItems[i];
            //232px如何求得:
            //1200px宽度 - 40px(5列共4个10px空隙), 再除以5份图宽度 = 232px
            item.style.width = '232px';             //图片宽度固定，高度自适应

            if(i < 5){  //设置第一行
                arr.push( item.offsetHeight );      // 设置首行5张图所处位置
                item.style.top = '0px';             // 它们高度都是0px
                
                if( (i+1) % 5 === 1 ){              // 第一行的第1张图片的左边距
                    item.style.left = '0px';
                }else{
                    item.style.left = i * (232 + 10) + 'px';  // 第一行的第2、3、4、5列的图片左边距 (图片宽度 + margin边距)
                };
            }else{     //设置第N行

                // 如第6张图片时，getMinIdx函数获取到前5张图片的最小高度的下标；
                var minIdx = getMinIdx(arr);

                // 第6张图所处的left位置就是在 前5图最小高度图片的下面(前5上已经设置了left)，top高度就是图片的高度+10margin;
                item.style.left = allItems[minIdx].offsetLeft + 'px';
                item.style.top = ( arr[minIdx] + 10 ) + 'px';

                // 最后再给前5的数组，当前操作的下标下， 更新加入的图片的高度
                arr[minIdx] = arr[minIdx] + ( item.offsetHeight + 10 );
            }

        }
    }

    // 获取数组中最小值的下标位置;
    function getMinIdx(arr){
        var min = Math.min(...arr);
        return arr.indexOf(min);
    }

    window.onload = function () {
        init();
    }

})()

.wrap{
    position: relative;
    width: 1200px;
    margin: 0 auto;
}
.wf-item{
    position: absolute;
    background-color: orange;
    overflow: hidden;
}
.wf-item img{
    display: block;
    width: 100%;
}