JS-DOM：基础实操---瀑布流排版

标签：style   color   io   strong   for   ar   cti   div   

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>

JS-DOM：基础实操---瀑布流排版,布布扣,bubuko.com

JS-DOM：基础实操---瀑布流排版

标签：style   color   io   strong   for   ar   cti   div   

原文地址：http://www.cnblogs.com/lxbchengxunyuan/p/3895096.html