先說一下什么是瀑布流布局。
就是一堆等寬不等高的數(shù)據(jù)塊組成的頁面，如圖：
現(xiàn)在好多網(wǎng)站都采用這種瀑布流布局，如蘑菇街。美麗說等等。
首先要實現(xiàn)它就要明白它是怎樣排列的。
每一行的列數(shù)都是根據(jù)圖片的寬度和頁面的寬度算比例算下來的。。
第一行就是按順序排列，其他的數(shù)據(jù)塊都是在每一列中挑選出最低的那一列依次排進去的。
首先實現(xiàn)框架。
<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>效果圖如下：
其實每一行六個圖片不是固定的，當你縮小窗口時，它會成為兩列，或者三列四列。但我們?yōu)榱艘院蟮牟季郑蛯⑺O置為固定的列數(shù)，即根據(jù)窗口的大小除以圖片的大小，向下取整。
接下來寫的是js實現(xiàn)的瀑布流布局。
在寫代碼之前，由于要用到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;}兩個參數(shù)分別是父元素和要查找的classname。
接下來寫函數(shù)：
//首先在onload函數(shù)中調(diào)用函數(shù)window.onload = function(){ waterFull('main','box');}function waterFull(parent,children){ //先獲得父元素及其底下所有的class = box的元素 var oParent = document.getElementById(parent); var oBoxs = getByClass(oParent,children);//我們在前面說過，數(shù)據(jù)塊的列數(shù)我們是希望不變的。由于每個數(shù)據(jù)塊都是等寬的，所以可以以第一個數(shù)據(jù)塊的寬度為準，獲得數(shù)據(jù)塊的寬度。再計算數(shù)據(jù)塊的列數(shù)，向下取整。 var oBoxW = oBoxs[0].offsetWidth; var cols = Math.floor(document.documentElement.clientWidth/oBoxW);接下來設置父元素的樣式，我們需要獲得它的寬度，并且使其居中oParent.style.cssText = 'width:' cols * oBoxW + 'px; margin: 0 auto';//在定義好了所有的樣式之后，就是排列數(shù)據(jù)塊。首先第一行是直接排列的。定義一個數(shù)組存放每一列的高度，從第二行開始，使得每一個數(shù)據(jù)塊都排在高度最低的那一列。首先得遍歷所有的box，即oBoxsvar arrH = []; //定義數(shù)組存放每一列的高度for(var i = 0; i< oBoxs.length; i++){ //當是第一行時，直接將數(shù)據(jù)塊依次排列，并在數(shù)組中記錄每一列的高度 if(i < cols){ arrH[i] = oBoxs[i].offsetHeight; } //當i>cols時，即要對前面的所有列的高度進行遍歷，將下一個圖片放在合適的位置。 else{ //首先在數(shù)組中找到高度最低的列數(shù)。我們都知道有Math.min可以找到最小的數(shù)字，但是它接受的參數(shù)必須是一組數(shù)字，所以在這里我們要用Math.min.apply()方法 var minH = Math.min.apply(null, arrH); //定義一個變量，存放數(shù)組中最小的高度 //在找出了最小高度之后，我們需要知道它的索引，才能夠為接下來的數(shù)據(jù)塊找到合適的位置，所以在下面又定義了一個找出最小值下標的函數(shù)。 //定義一個變量去接受getMinhIndex函數(shù)的返回值 var minIndex = getMinhIndex(arrH,minH); //在獲得了高度最小的列數(shù)的索引后，就可以將下一個元素放到合適的位置 oBoxs[i].style.position = 'absolute'; oBoxs[i].style.top = minH + 'px'; oBoxs[i].style.left = minIndex * oBoxW + 'px'; //將當前的數(shù)據(jù)塊終于都放到了合適的位置，但不要忘了更新arrH數(shù)組 arrH[minIndex] += oBoxs[i].offsetHeight; }}}//獲取當前最小值得下標function getMinhIndex(array,min){ for(var i in array){ if(array[i] == min) return i; }}以上就是完整的瀑布流布局的js實現(xiàn)代碼。效果圖如下：
附上源代碼：
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); //計算整個頁面顯示的列數(shù) var oBoxW = oBoxs[0].offsetWidth; var cols = Math.floor(document.documentElement.clientWidth/oBoxW); //設置main的寬度，并且居中 oParent.style.cssText = 'width:'+oBoxW * cols +'px; margin: 0 auto'; //找出高度最小的圖片，將下一個圖片放在下面 //定義一個數(shù)組，存放每一列的高度，初始化存的是第一行的所有列的高度 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>以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
