這篇“如何用js實現(xiàn)瀑布流布局”文章的知識點大部分人都不太理解,所以小編給大家總結(jié)了以下內(nèi)容,內(nèi)容詳細,步驟清晰,具有一定的借鑒價值,希望大家閱讀完這篇文章能有所收獲,下面我們一起來看看這篇“如何用js實現(xiàn)瀑布流布局”文章吧。
成都服務(wù)器托管,創(chuàng)新互聯(lián)公司提供包括服務(wù)器租用、四川電信科技城機房、帶寬租用、云主機、機柜租用、主機租用托管、CDN網(wǎng)站加速、域名注冊等業(yè)務(wù)的一體化完整服務(wù)。電話咨詢:13518219792
1、首先我們定義一個container容器來裝所有圖片,在這個容器中用box容器裝box-img容器再裝入每張圖片,這樣方便之后樣式的編寫。
2、使圖片同行顯示--給box容器使用float:left;屬性。
3、讓圖片等寬顯示--給box-img容器設(shè)置width:150px;,img標簽設(shè)置width:100%;繼承父容器box-img高度的100%。
4、為了使效果更好看,我們給裝圖片的容器設(shè)置內(nèi)邊距,邊框和陰影的效果。
前端完整代碼附上:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>waterFall</title>
<script src="./index.js"></script>
</head>
<style>
*{
margin: 0;
padding: 0;
}
.container {
overflow: hidden;
position: relative;
}
.box{
float: left;
padding: 5px;
}
.box-img{
width: 150px;
padding: 5px;
border: 1px solid #484848;
box-shadow: 0 0 5px #484848;
}
.box-img img{
width: 100%;
}
</style>
<body>
<div id="container">
<div>
<div>
<img src="./img/1.jpg" alt="">
</div>
</div>
/*.......后面接39個box,此處省略*/
</div>
</body>
</html>
在這個函數(shù)中,我們調(diào)用imgLocation('container','box')函數(shù)來呈現(xiàn)最終效果,傳入的實參是父容器'container'以及裝圖片的子容器'box'。
window.onload=function() {
imgLocation('container','box')
}
獲取所有要擺放的圖片
,并將其存入一個數(shù)組
中利用document.getElementById(parent)得到父容器;
調(diào)用getChildElement(cparent,content)方法,在這個方法中,先獲取父容器所有標簽,對所有標簽遍歷并用if條件語句得到類名為box的容器(裝圖片的容器),將其存入我們自己構(gòu)建的一個數(shù)組中,返回值為這個數(shù)組,方便之后通過遍歷來操作圖片擺放的位置。
function imgLocation(parent,content){
var cparent=document.getElementById(parent)
//cparent下的所有的第一層的子容器 box
var ccontent=getChildElement(cparent,content)//數(shù)組,40個div
}
//取到父容器中的某一層子容器
function getChildElement(parent,content){
var contentArr=[]
var allContent=parent.getElementsByTagName('*')//通過標簽來選中得到一個數(shù)組
//遍歷allContent把其中類名為content的容器都存到contentArr數(shù)組中
for(var i=0;i<allContent.length;i++){
if(allContent[i].className==content){ //當前這個容器的類名是否為content
contentArr.push(allContent[i])
}
}
return contentArr;
}
數(shù)組
后,找出從誰開始
是需要被擺放
位置的我們采用以下方法:
首先獲取視窗的寬度和每張圖片的寬度,將兩者相除并向下取整可得到第一行可以放置圖片的數(shù)量,自然也就知道了我們需要操作的那張圖片的序號。
//從誰開始是需要被擺放位置的
var winWidth=document.documentElement.clientWidth;//視窗寬度
var imgWidth=ccontent[0].offsetWidth;//圖片寬度
var num=Math.floor(winWidth/imgWidth)//第一行能放幾張圖
被擺放
位置的圖片序號后,確定其擺放位置
我們自己定義一個存儲高度的數(shù)組,對前一行元素的高度進行遍歷并存入數(shù)組,當遍歷到需要被擺放位置的圖片時,用Math.min()方法獲取前一行高度最矮的元素高度,并用indexOf()方法獲取到其下標。
再對我們所操作的這個圖片容器的樣式調(diào)整:
position:absolute;絕對定位,top值設(shè)置為前一行高度最矮的圖片高度minHeight,left值設(shè)置為單張圖片寬度乘這張圖片的下標minIndex。
最后,不要忘啦,擺放好圖片后,還要更新擺放的那一列的高度喲~
//操作num+1張圖
var BoxHeightArr=[]
for(var i=0;i<ccontent.length;i++){
//前num張只要計算高度
if(i<num){
BoxHeightArr[i]=ccontent[i].offsetHeight
}
else{
//我們要操作的box :ccontent[i]
var minHeight=Math.min.apply(null,BoxHeightArr)//apply:把最小值這個方法借給它用
var minIndex=BoxHeightArr.indexOf(minHeight)//返回數(shù)組下標
ccontent[i].style.position='absolute'//style設(shè)置樣式
ccontent[i].style.top=minHeight+'px'
ccontent[i].style.left=imgWidth*minIndex+'px'
//更新最矮的那一列的高度
BoxHeightArr[minIndex]+=ccontent[i].offsetHeight
}
}
以上就是關(guān)于“如何用js實現(xiàn)瀑布流布局”這篇文章的內(nèi)容,相信大家都有了一定的了解,希望小編分享的內(nèi)容對大家有幫助,若想了解更多相關(guān)的知識內(nèi)容,請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
分享題目:如何用js實現(xiàn)瀑布流布局
URL地址:http://bm7419.com/article26/gihgcg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供定制網(wǎng)站、網(wǎng)頁設(shè)計公司、動態(tài)網(wǎng)站、品牌網(wǎng)站制作、網(wǎng)站導(dǎo)航、網(wǎng)站營銷
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)