JavaScript瀑布流布局實(shí)現(xiàn)代碼
更新時(shí)間：2017年05月06日 11:22:25 作者：畫(huà)一生情入顏容
這篇文章主要為大家詳細(xì)介紹了JavaScript瀑布流布局的實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
先說(shuō)一下什么是瀑布流布局。
就是一堆等寬不等高的數(shù)據(jù)塊組成的頁(yè)面，如圖：
現(xiàn)在好多網(wǎng)站都采用這種瀑布流布局，如蘑菇街。美麗說(shuō)等等。
首先要實(shí)現(xiàn)它就要明白它是怎樣排列的。
每一行的列數(shù)都是根據(jù)圖片的寬度和頁(yè)面的寬度算比例算下來(lái)的。。
第一行就是按順序排列，其他的數(shù)據(jù)塊都是在每一列中挑選出最低的那一列依次排進(jìn)去的。
首先實(shí)現(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個(gè)圖片，每個(gè)圖片都被一個(gè)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>
效果圖如下：
其實(shí)每一行六個(gè)圖片不是固定的，當(dāng)你縮小窗口時(shí)，它會(huì)成為兩列，或者三列四列。但我們?yōu)榱艘院蟮牟季郑蛯⑺O(shè)置為固定的列數(shù)，即根據(jù)窗口的大小除以圖片的大小，向下取整。
接下來(lái)寫(xiě)的是js實(shí)現(xiàn)的瀑布流布局。
在寫(xiě)代碼之前，由于要用到box屬性，而js中沒(méi)有直接定義獲得class的方法，所以我們?cè)谶@兒要寫(xiě)一個(gè)獲得class的方法：
function getByClass(parent,className){
var boxArr = new Array();//用來(lái)獲取所有class為box的元素
oElement = parent.getElementsByTagName('*');
for (var i = 0; i <oElement.length; i++) {
if(oElement[i].className == className){
boxArr.push(oElement[i]);
}
};
return boxArr;
}
兩個(gè)參數(shù)分別是父元素和要查找的classname。
接下來(lái)寫(xiě)函數(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);
//我們?cè)谇懊嬲f(shuō)過(guò)，數(shù)據(jù)塊的列數(shù)我們是希望不變的。由于每個(gè)數(shù)據(jù)塊都是等寬的，所以可以以第一個(gè)數(shù)據(jù)塊的寬度為準(zhǔn)，獲得數(shù)據(jù)塊的寬度。再計(jì)算數(shù)據(jù)塊的列數(shù)，向下取整。
var oBoxW = oBoxs[0].offsetWidth;
var cols = Math.floor(document.documentElement.clientWidth/oBoxW);
接下來(lái)設(shè)置父元素的樣式，我們需要獲得它的寬度，并且使其居中
oParent.style.cssText = 'width:' cols * oBoxW + 'px; margin: 0 auto';
//在定義好了所有的樣式之后，就是排列數(shù)據(jù)塊。首先第一行是直接排列的。定義一個(gè)數(shù)組存放每一列的高度，從第二行開(kāi)始，使得每一個(gè)數(shù)據(jù)塊都排在高度最低的那一列。首先得遍歷所有的box，即oBoxs
var arrH = []; //定義數(shù)組存放每一列的高度
for(var i = 0; i< oBoxs.length; i++){
//當(dāng)是第一行時(shí)，直接將數(shù)據(jù)塊依次排列，并在數(shù)組中記錄每一列的高度
if(i < cols){
arrH[i] = oBoxs[i].offsetHeight;
}
//當(dāng)i>cols時(shí)，即要對(duì)前面的所有列的高度進(jìn)行遍歷，將下一個(gè)圖片放在合適的位置。
else{
//首先在數(shù)組中找到高度最低的列數(shù)。我們都知道有Math.min可以找到最小的數(shù)字，但是它接受的參數(shù)必須是一組數(shù)字，所以在這里我們要用Math.min.apply()方法
var minH = Math.min.apply(null, arrH); //定義一個(gè)變量，存放數(shù)組中最小的高度
//在找出了最小高度之后，我們需要知道它的索引，才能夠?yàn)榻酉聛?lái)的數(shù)據(jù)塊找到合適的位置，所以在下面又定義了一個(gè)找出最小值下標(biāo)的函數(shù)。
//定義一個(gè)變量去接受getMinhIndex函數(shù)的返回值
var minIndex = getMinhIndex(arrH,minH);
//在獲得了高度最小的列數(shù)的索引后，就可以將下一個(gè)元素放到合適的位置
oBoxs[i].style.position = 'absolute';
oBoxs[i].style.top = minH + 'px';
oBoxs[i].style.left = minIndex * oBoxW + 'px';
//將當(dāng)前的數(shù)據(jù)塊終于都放到了合適的位置，但不要忘了更新arrH數(shù)組
arrH[minIndex] += oBoxs[i].offsetHeight;
}
}
}
//獲取當(dāng)前最小值得下標(biāo)
function getMinhIndex(array,min){
for(var i in array){
if(array[i] == min)
return i;
}
}
以上就是完整的瀑布流布局的js實(shí)現(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);
//計(jì)算整個(gè)頁(yè)面顯示的列數(shù)
var oBoxW = oBoxs[0].offsetWidth;
var cols = Math.floor(document.documentElement.clientWidth/oBoxW);
//設(shè)置main的寬度，并且居中
oParent.style.cssText = 'width:'+oBoxW * cols +'px; margin: 0 auto';
//找出高度最小的圖片，將下一個(gè)圖片放在下面
//定義一個(gè)數(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();//用來(lái)獲取所有class為box的元素
oElement = parent.getElementsByTagName('*');
for (var i = 0; i <oElement.length; i++) {
if(oElement[i].className == className){
boxArr.push(oElement[i]);
}
};
return boxArr;
}
//獲取當(dāng)前最小值得下標(biāo)
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>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
ES6中的rest參數(shù)與擴(kuò)展運(yùn)算符詳解
rest參數(shù)和擴(kuò)展運(yùn)算符都是ES6新增的特性。下面這篇文章主要給大家介紹了關(guān)于ES6中rest參數(shù)與擴(kuò)展運(yùn)算符的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-07-07
相信大家也都發(fā)現(xiàn)了，在網(wǎng)上關(guān)于JS的變量和作用域的文章有很多，但真正能講清楚，能深入理解的文章很少。在閱讀了很多人的文章以后，我決定綜合起來(lái)，結(jié)合實(shí)際代碼，希望能夠以一個(gè)比較清楚完整的方式讓大家真正理解。有需要的朋友們下面來(lái)一起看看吧。2016-10-10
使用JavaScript 編寫(xiě)簡(jiǎn)單計(jì)算器
這篇文章主要介紹了使用JavaScript 編寫(xiě)簡(jiǎn)單計(jì)算器,需要的朋友可以參考下2014-11-11
這篇文章主要介紹了js倒計(jì)時(shí)簡(jiǎn)單實(shí)現(xiàn)方法，方便一些提示重要日期的來(lái)臨，本實(shí)例特別適合用于商品倒計(jì)時(shí)搶購(gòu)活動(dòng)，感興趣的小伙伴們可以參考一下2015-12-12
JS鼠標(biāo)事件大全 推薦收藏，整理的比較細(xì)，推薦大家看下。2011-11-11
JSON是一種數(shù)據(jù)格式，在實(shí)際開(kāi)發(fā)中，JSON總是以配置文件的形式出現(xiàn)。小程序項(xiàng)目中也不例外:通過(guò)不同的Json配置文件，可以對(duì)小程序項(xiàng)目進(jìn)行不同級(jí)別的配置2022-10-10
在Angular中，最好在一個(gè)頂級(jí)模塊中加載和配置路由，它專注于路由功能，然后由根模塊AppModule導(dǎo)入它，最后還有初始化并監(jiān)聽(tīng)瀏覽器的地址變化2023-01-01
Three.js如何實(shí)現(xiàn)霧化效果示例代碼
霧化效果是3D的比較常見(jiàn)的特性，在游戲中見(jiàn)到的煙霧、爆炸火焰以及白云等效果都是霧化的結(jié)果，下面這篇文章主要給大家介紹了關(guān)于Three.js如何實(shí)現(xiàn)霧化效果的相關(guān)資料，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-09-09
JS實(shí)現(xiàn)可自定義大小，可雙擊關(guān)閉的彈出層效果
這篇文章主要介紹了JS實(shí)現(xiàn)可自定義大小，可雙擊關(guān)閉的彈出層效果,涉及JavaScript定時(shí)函數(shù)及頁(yè)面元素動(dòng)態(tài)操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
JS+CSS實(shí)現(xiàn)Li列表隔行換色效果的方法
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)Li列表隔行換色效果的方法,實(shí)例分析了js操作li節(jié)點(diǎn)的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-02-02