瀑布流

//1.随机生成LI的高度

//2.生成LI

//3.判断UL高度

//4.将LI插入到最低UL里面

var ul = document.getElementsByTagName('ul');

var li = document.getElementsByTagName('li');

// apply();

// var arr = [23,42,37,58]

// console.log(Math.min.apply(null,arr))

// console.log(document.documentElement.clientHeight);

addNode(30)

window.onscroll = function(){

var oLI = document.createElement('li');

var arrH =[],index = 0,iHeight = 0;

iHeight = scrollY() + clientY();

// console.log(scrollY())

for (var i = 0;i

arrH.push(ul[i].offsetHeight)

}

index = arrH.indexOf(Math.min.apply(null,arrH));

var iH = ul[index].offsetTop + ul[index].offsetHeight - 100;

if( iH <= iHeight){

addNode(30)

}

}

function addNode(num){

num = isNaN(num) ? 0 : num;

for (var i = 0;i

creatLi()

}

}

function creatLi(){

var arrH = [],index = 0;

var oLI = document.createElement('li');

oLI.innerHTML = li.length +1;

oLI.style.height = randH(100,300) +'px';

for (var i = 0;i

arrH.push(ul[i].offsetHeight)

}

index = arrH.indexOf(Math.min.apply(null,arrH));

ul[index].appendChild(oLI);

}

function randH(min,max){ //100 - 300

return parseInt(Math.random()*(max-min+1)+ min)

}

function scrollY(){

return document.body.scrollTop || document.documentElement.scrollTop;

}

function clientY(){

return document.documentElement.clientHeight || window.innerHeight

}