JavaScript瀑布流布局實現代碼，javascript瀑布

JavaScript瀑布流布局實現代碼，javascript瀑布

先說一下什麼是瀑布流布局。

就是一堆等寬不等高的資料區塊組成的頁面，

現在好多網站都採用這種瀑布流布局，如蘑菇街。美麗說等等。
首先要實現它就要明白它是怎樣排列的。
每一行的列數都是根據圖片的寬度和頁面的寬度算比例算下來的。。
第一行就是按順序排列，其他的資料區塊都是在每一列中挑選出最低的那一列依次排進去的。

首先實現架構。

<div id = "main"> <div class = "box">  <div class = "pic">   <img src = "images/0.jpg">  </div> </div> <div class = "box">  <div class = "pic">   <img src = "images/1.jpg">  </div> </div> <div class = "box">  <div class = "pic">   <img src = "images/2.jpg">  </div> </div> <div class = "box">  <div class = "pic">   <img src = "images/3.jpg">  </div> </div> <div class = "box">  <div class = "pic">   <img src = "images/4.jpg">  </div> </div> <div class = "box">  <div class = "pic">   <img src = "images/5.jpg">  </div> </div> <div class = "box">  <div class = "pic">   <img src = "images/6.jpg">  </div> </div> <div class = "box">  <div class = "pic">   <img src = "images/7.jpg">  </div> </div> <div class = "box">  <div class = "pic">   <img src = "images/8.jpg">  </div> </div> <div class = "box">  <div class = "pic">   <img src = "images/9.jpg">  </div> </div> <div class = "box">  <div class = "pic">   <img src = "images/10.jpg">  </div> </div> <div class = "box">  <div class = "pic">   <img src = "images/11.jpg">  </div> </div> <div class = "box">  <div class = "pic">   <img src = "images/12.jpg">  </div> </div> <div class = "box">  <div class = "pic">   <img src = "images/13.jpg">  </div> </div> <div class = "box">  <div class = "pic">   <img src = "images/14.jpg">  </div> </div></div>

這裡定義了14個圖片，每個圖片都被一個class= box的屬性和class= “pic”的屬性包裹，在css中定義其樣式：

*{  padding: 0px;  margin: 0px; } #main{  position: relative; } .box{/*  display: inline-block;*/  padding: 15px 0px 0px 15px;  float: left; } .pic{  padding: 10px;  border-radius: 5px;  border:1px solid #ccc;  box-shadow: 0 0 5px #ccc; } .pic img{  width: 165px;  height: auto; } </style>

如下：

其實每一行六個圖片不是固定的，當你縮小視窗時，它會成為兩列，或者三列四列。但我們為了以後的布局，就將它設定為固定的列數，即根據視窗的大小除以圖片的大小，向下取整。

接下來寫的是js實現的瀑布流布局。
在寫代碼之前，由於要用到box屬性，而js中沒有直接定義獲得class的方法，所以我們在這兒要寫一個獲得class的方法：

function getByClass(parent,className){ var boxArr = new Array();//用來擷取所有class為box的元素 oElement = parent.getElementsByTagName('*'); for (var i = 0; i <oElement.length; i++) {  if(oElement[i].className == className){   boxArr.push(oElement[i]);  } }; return boxArr;}

兩個參數分別是父元素和要尋找的classname。

接下來寫函數：

//首先在onload函數中調用函數window.onload = function(){ waterFull('main','box');}function waterFull(parent,children){ //先獲得父元素及其底下所有的class = box的元素 var oParent = document.getElementById(parent); var oBoxs = getByClass(oParent,children);//我們在前面說過，資料區塊的列數我們是希望不變的。由於每個資料區塊都是等寬的，所以可以以第一個資料區塊的寬度為準，獲得資料區塊的寬度。再計算資料區塊的列數，向下取整。 var oBoxW = oBoxs[0].offsetWidth; var cols = Math.floor(document.documentElement.clientWidth/oBoxW);接下來設定父元素的樣式，我們需要獲得它的寬度，並且使其置中oParent.style.cssText = 'width:' cols * oBoxW + 'px; margin: 0 auto';//在定義好了所有的樣式之後，就是排列資料區塊。首先第一行是直接排列的。定義一個數組存放每一列的高度，從第二行開始，使得每一個資料區塊都排在高度最低的那一列。首先得遍曆所有的box，即oBoxsvar arrH = []; //定義數組存放每一列的高度for(var i = 0; i< oBoxs.length; i++){ //當是第一行時，直接將資料區塊依次排列，並在數組中記錄每一列的高度 if(i < cols){  arrH[i] = oBoxs[i].offsetHeight; } //當i>cols時，即要對前面的所有列的高度進行遍曆，將下一個圖片放在合適的位置。 else{ //首先在數組中找到高度最低的列數。我們都知道有Math.min可以找到最小的數字，但是它接受的參數必須是一組數字，所以在這裡我們要用Math.min.apply()方法 var minH = Math.min.apply(null, arrH); //定義一個變數，存放數組中最小的高度 //在找出了最小高度之後，我們需要知道它的索引，才能夠為接下來的資料區塊找到合適的位置，所以在下面又定義了一個找出最小值下標的函數。 //定義一個變數去接受getMinhIndex函數的傳回值 var minIndex = getMinhIndex(arrH,minH); //在獲得了高度最小的列數的索引後，就可以將下一個元素放到合適的位置 oBoxs[i].style.position = 'absolute'; oBoxs[i].style.top = minH + 'px'; oBoxs[i].style.left = minIndex * oBoxW + 'px'; //將當前的資料區塊終雩都放到了合適的位置，但不要忘了更新arrH數組 arrH[minIndex] += oBoxs[i].offsetHeight;  }}}//擷取當前最小值得下標function getMinhIndex(array,min){ for(var i in array){  if(array[i] == min)   return i; }}

以上就是完整的瀑布流布局的js實現代碼。如下：

附上原始碼：

js代碼：

window.onload = function(){ waterFull('main','box');}function waterFull(parent,children){ var oParent = document.getElementById(parent); //var oBoxs = parent.querySelectorAll(".box");  var oBoxs = getByClass(oParent,children); //計算整個頁面顯示的列數 var oBoxW = oBoxs[0].offsetWidth; var cols = Math.floor(document.documentElement.clientWidth/oBoxW); //設定main的寬度，並且置中 oParent.style.cssText = 'width:'+oBoxW * cols +'px; margin: 0 auto'; //找出高度最小的圖片，將下一個圖片放在下面 //定義一個數組，存放每一列的高度，初始化存的是第一行的所有列的高度 var arrH = []; for(var i = 0; i< oBoxs.length ; i++){  if(i < cols){   arrH.push(oBoxs[i].offsetHeight);  }  else{   var minH = Math.min.apply(null,arrH);   var minIndex = getMinhIndex(arrH,minH);   oBoxs[i].style.position = 'absolute';   oBoxs[i].style.top= minH + 'px';   oBoxs[i].style.left = minIndex * oBoxW + 'px';   // oBoxs[i].style.left = arrH[minIndex].;   arrH[minIndex] += oBoxs[i].offsetHeight;   } }}function getByClass(parent,className){ var boxArr = new Array();//用來擷取所有class為box的元素 oElement = parent.getElementsByTagName('*'); for (var i = 0; i <oElement.length; i++) {  if(oElement[i].className == className){   boxArr.push(oElement[i]);  } }; return boxArr;}//擷取當前最小值得下標function getMinhIndex(array,min){ for(var i in array){  if(array[i] == min)   return i; }}

html以及css代碼：

<!DOCTYPE html><html><head><meta charset = "utf-8" /><script src = "./jswaterfll.js"></script> <title>瀑布流布局</title> <style type="text/css"> *{  padding: 0px;  margin: 0px; } #main{  position: relative; } .box{/*  display: inline-block;*/  padding: 15px 0px 0px 15px;  float: left; } .pic{  padding: 10px;  border-radius: 5px;  border:1px solid #ccc;  box-shadow: 0 0 5px #ccc; } .pic img{  width: 165px;  height: auto; } </style></head><body><div id = "main"> <div class = "box">  <div class = "pic">   <img src = "images/0.jpg">  </div> </div> <div class = "box">  <div class = "pic">   <img src = "images/1.jpg">  </div> </div> <div class = "box">  <div class = "pic">   <img src = "images/2.jpg">  </div> </div> <div class = "box">  <div class = "pic">   <img src = "images/3.jpg">  </div> </div> <div class = "box">  <div class = "pic">   <img src = "images/4.jpg">  </div> </div> <div class = "box">  <div class = "pic">   <img src = "images/5.jpg">  </div> </div> <div class = "box">  <div class = "pic">   <img src = "images/6.jpg">  </div> </div> <div class = "box">  <div class = "pic">   <img src = "images/7.jpg">  </div> </div> <div class = "box">  <div class = "pic">   <img src = "images/8.jpg">  </div> </div> <div class = "box">  <div class = "pic">   <img src = "images/9.jpg">  </div> </div> <div class = "box">  <div class = "pic">   <img src = "images/10.jpg">  </div> </div> <div class = "box">  <div class = "pic">   <img src = "images/11.jpg">  </div> </div> <div class = "box">  <div class = "pic">   <img src = "images/12.jpg">  </div> </div> <div class = "box">  <div class = "pic">   <img src = "images/13.jpg">  </div> </div> <div class = "box">  <div class = "pic">   <img src = "images/14.jpg">  </div> </div> <div class = "box">  <div class = "pic">   <img src = "images/15.jpg">  </div> </div> <div class = "box">  <div class = "pic">   <img src = "images/16.jpg">  </div> </div> <div class = "box">  <div class = "pic">   <img src = "images/17.jpg">  </div> </div> <div class = "box">  <div class = "pic">   <img src = "images/18.jpg">  </div> </div> <div class = "box">  <div class = "pic">   <img src = "images/19.jpg">  </div> </div> <div class = "box">  <div class = "pic">   <img src = "images/20.jpg">  </div> </div> <div class = "box">  <div class = "pic">   <img src = "images/21.jpg">  </div> </div></div></body></html>

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。