// 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();