js原生封装瀑布流

// var eeeeeeeeeeee = function () {
    
    
//     var defultes = {
    
    
//         gap:15 ,//间距
//     }
//
//     eeeeeeeeeeee.prototype = defultes;
// }

HTMLElement.prototype.waterFall = function () {
    
    
    // alert(this.offsetWidth);
    var defultes = {
    
    
        gap:15 ,//间距
    }
    defultes.prototype = defultes;
    var item = this.getElementsByClassName("item");
    var itemwidth = item[0].offsetWidth;
    var itemHeight = 0;
    var itemarrayHeight = [];
    var column = Math.floor(this.offsetWidth/itemwidth)
    // alert(column);
    for(var i = 0;i<item.length;i++ ){
    
    
        //获取第一行高度
        itemHeight = item[i].offsetHeight;
        // alert(itemHeight);
        if(i < column){
    
    
            item[i].style.top = 0;
            item[i].style.left = (itemwidth+defultes.gap) * i +"px";
            itemarrayHeight[i] = itemHeight;
        }else{
    
    
            var min_index = getMin(itemarrayHeight).index;
            var min_value = getMin(itemarrayHeight).value;
            item[i].style.top = min_value+defultes.gap+"px";
            item[i].style.left = (itemwidth+defultes.gap) * min_index +"px";
            itemarrayHeight[min_index] += itemHeight+defultes.gap;
        }

    }
    var max_value = getMax(itemarrayHeight).value;
    this.style.height = max_value +"px";

};

function getMin(arr) {
    
    
    var min = {
    
    };
    min.index = 0;
    min.value = arr[min.index];
    for(var i=0;i<arr.length;i++){
    
    
        if(arr[i] < min.value){
    
    
            min.value = arr[i];
            min.index = i;
        }
    }
    return min;
}
function getMax(arr) {
    
    
    var max = {
    
    };
    max.index = 0;
    max.value = arr[max.index];
    for(var i=0;i<arr.length;i++){
    
    
        if(arr[i] > max.value){
    
    
            max.value = arr[i];
            max.index = i;
        }
    }
    return max;
}

使用方法

document.getElementsByClassName("items")[0].waterFall();