JS-DOM：基础实操---瀑布流排版
CSS部分
<style type="text/css">
#wrap{
width: 980px;
margin: 0 auto;
border: 1px solid blue;
}
#wrap ul{
width: 250px;
margin: 10px;
border: 1px solid #ccc;
float: left;
padding: 0;
}
#wrap ul li{
width: 248px;
list-style:none;
margin: 0;
padding:0;
margin-top: 10px;
border: 1px solid yellow;
}
</style>
HTML部分
<div id="wrap">
<ul></ul>
<ul></ul>
<ul></ul>
</div>
JS-DOM部分
<script>
function fnRand(min,max){
return parseInt(Math.random()*(max-min)+min);
}
window.onload=function(){
var oWrap=document.getElementById("wrap");
var aUl=oWrap.children;
for(var i=0;i<10;i++){
var oLi=document.createElement("li");
oLi.style.height=fnRand(100,300)+"px";
var ul1=aUl[0].offsetHeight;
var ul2=aUl[1].offsetHeight;
var ul3=aUl[2].offsetHeight;
var min=ul1;
if(ul1<ul2){
if(ul1<ul3){
min=ul1;
}
else{
min=ul3;
}
}else{
if(ul2<ul3){
min=ul2;
}
else{
min=ul3;
}
}
for(var j=0;j<aUl.length;j++){
if(min==aUl[j].offsetHeight){
min=aUl[j];
}
}
alert(‘a‘);
min.appendChild(oLi);
}
}
</script>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
