首頁 > 文章 > web前端 > 利用JavaScript實現瀑布流佈局的效果程式碼

利用JavaScript實現瀑布流佈局的效果程式碼

零下一度原創: 2017-05-08 10:28:471383瀏覽

這篇文章主要為大家詳細介紹了JavaScript 瀑布流佈局的實作程式碼，具有一定的參考價值，有興趣的小夥伴們可以參考一下

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

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

利用JavaScript實現瀑布流佈局的效果程式碼

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

首先實作框架。

<p id = "main">
 <p class = "box">
  <p class = "pic">
   <img  src = "images/0.jpg" alt="利用JavaScript實現瀑布流佈局的效果程式碼" >
  </p>
 </p>
 <p class = "box">
  <p class = "pic">
   <img  src = "images/1.jpg" alt="利用JavaScript實現瀑布流佈局的效果程式碼" >
  </p>
 </p>
 <p class = "box">
  <p class = "pic">
   <img  src = "images/2.jpg" alt="利用JavaScript實現瀑布流佈局的效果程式碼" >
  </p>
 </p>
 <p class = "box">
  <p class = "pic">
   <img  src = "images/3.jpg" alt="利用JavaScript實現瀑布流佈局的效果程式碼" >
  </p>
 </p>
 <p class = "box">
  <p class = "pic">
   <img  src = "images/4.jpg" alt="利用JavaScript實現瀑布流佈局的效果程式碼" >
  </p>
 </p>
 <p class = "box">
  <p class = "pic">
   <img  src = "images/5.jpg" alt="利用JavaScript實現瀑布流佈局的效果程式碼" >
  </p>
 </p>
 <p class = "box">
  <p class = "pic">
   <img  src = "images/6.jpg" alt="利用JavaScript實現瀑布流佈局的效果程式碼" >
  </p>
 </p>
 <p class = "box">
  <p class = "pic">
   <img  src = "images/7.jpg" alt="利用JavaScript實現瀑布流佈局的效果程式碼" >
  </p>
 </p>

 <p class = "box">
  <p class = "pic">
   <img  src = "images/8.jpg" alt="利用JavaScript實現瀑布流佈局的效果程式碼" >
  </p>
 </p>
 <p class = "box">
  <p class = "pic">
   <img  src = "images/9.jpg" alt="利用JavaScript實現瀑布流佈局的效果程式碼" >
  </p>
 </p>
 <p class = "box">
  <p class = "pic">
   <img  src = "images/10.jpg" alt="利用JavaScript實現瀑布流佈局的效果程式碼" >
  </p>
 </p>
 <p class = "box">
  <p class = "pic">
   <img  src = "images/11.jpg" alt="利用JavaScript實現瀑布流佈局的效果程式碼" >
  </p>
 </p>
 <p class = "box">
  <p class = "pic">
   <img  src = "images/12.jpg" alt="利用JavaScript實現瀑布流佈局的效果程式碼" >
  </p>
 </p>
 <p class = "box">
  <p class = "pic">
   <img  src = "images/13.jpg" alt="利用JavaScript實現瀑布流佈局的效果程式碼" >
  </p>
 </p>
 <p class = "box">
  <p class = "pic">
   <img  src = "images/14.jpg" alt="利用JavaScript實現瀑布流佈局的效果程式碼" >
  </p>
 </p>
</p>

這裡定義了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(&#39;*&#39;);

 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(&#39;main&#39;,&#39;box&#39;);
}


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 = &#39;width:&#39; cols * oBoxW + &#39;px; margin: 0 auto&#39;;

//在定义好了所有的样式之后，就是排列数据块。首先第一行是直接排列的。定义一个数组存放每一列的高度，从第二行开始，使得每一个数据块都排在高度最低的那一列。首先得遍历所有的box，即oBoxs

var 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 = &#39;absolute&#39;;
 oBoxs[i].style.top = minH + &#39;px&#39;;
 oBoxs[i].style.left = minIndex * oBoxW + &#39;px&#39;;

 //将当前的数据块终于都放到了合适的位置，但不要忘了更新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(&#39;*&#39;);

 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程式碼：






 瀑布流布局