瀑布流的佈局（功能尚未完善）

時間 2020-06-19

原文原文鏈接

<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>js瀑布流佈局</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
*{margin: 0px; padding: 0px; font-family: "\5FAE\8F6F\96C5\9ED1" !important;}
.clearfix:after{content:'.';display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block;}
* html .clearfix{height:1%}
.clearfix{display:block;}
ul li{list-style:none;}
#div1{position:relative;border:1px solid red; margin:0 auto;}
#div1 img{
position:absolute; width:225px; border:1px solid #ccc;
}
</style>
</head>
<script type='text/javascript'>
window.onload=function(){
  var oDiv=document.getElementById('div1');
  var oImg=oDiv.getElementsByTagName('img');
  var cell=4;                         //設置的列數
  var iW =oImg[0].offsetWidth+13;     //設置每一列的寬度
  oDiv.style.width=iW*cell-13+'px';   //設置容器的寬度
  var oImgT=[];                       //定義存放圖片高度的數組
  for(var i=0;i<oImg.length;i++){
    oImgT.push(oImg[i].offsetHeight); 
  }
  var cellT=[];                       //定義每一列的top值 
  for(var i=0;i<cell;i++){           //把第一行排放好，並將每一列的高度記入數據存放在 cellT
    oImg[i].style.left=i*iW+'px';
    oImg[i].style.top=0+'px';    
    cellT.push(oImgT[i]);         
  };
  for(var i=cell;i<oImg.length;i++){
    var MinIndex = getMinKey(cellT);
    oImg[i].style.top = cellT[MinIndex]+10+"px";
    oImg[i].style.left = iW * MinIndex + "px";
    cellT[MinIndex] = oImgT[i] + cellT[MinIndex]+10;  //更新該列的高度
  }
  function getMinKey(arr) {                          //獲取數字數組最小值的索引
     var a = arr[0];       
     var b = 0;
     for (var k in arr) {
         if (arr[k] < a) {
             a = arr[k];
             b = k;
         }
     }
     return b;
  }
 }
</script>
<body>
  <div id='div1' class='clearfix'>
    <img src='images/01.jpg'> 
    <img src='images/02.jpg'>
    <img src='images/03.jpg'>
    <img src='images/04.jpg'>
    <img src='images/05.jpg'>
    <img src='images/06.jpg'>
    <img src='images/07.jpg'>
    <img src='images/08.jpg'>
    <img src='images/09.jpg'>
    <img src='images/10.jpg'>
    <img src='images/11.jpg'>
    <img src='images/12.jpg'>
    <img src='images/13.jpg'>
    <img src='images/14.jpg'>
    <img src='images/15.jpg'>
    <img src='images/16.jpg'>
    <img src='images/17.jpg'>
    <img src='images/18.jpg'>
    <img src='images/19.jpg'>
    <img src='images/20.jpg'>
  </div>  
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。