首页 > 代码库 > JS-DOM:基础实操---瀑布流排版

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>