如何實(shí)現(xiàn)瀑布流布局?針對(duì)這個(gè)問題,這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答,希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡(jiǎn)單易行的方法。
index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>waterfall layout</title> <link type="text/css" href="./imgs/wf.css" rel="stylesheet"/> <script type="text/javascript" src="./imgs/wf.js"></script> </head> <body> <div id="main"> <div class="box"> <div class="pic"> <img src="imgs/0.jpg"/> </div> </div> <div class="box"> <div class="pic"> <img src="imgs/1.jpg"/> </div> </div> <div class="box"> <div class="pic"> <img src="imgs/2.jpg"/> </div> </div> <div class="box"> <div class="pic"> <img src="imgs/3.jpg"/> </div> </div> <div class="box"> <div class="pic"> <img src="imgs/4.jpg"/> </div> </div> <div class="box"> <div class="pic"> <img src="imgs/5.jpg"/> </div> </div> <div class="box"> <div class="pic"> <img src="imgs/6.jpg"/> </div> </div> <div class="box"> <div class="pic"> <img src="imgs/7.jpg"/> </div> </div> <div class="box"> <div class="pic"> <img src="imgs/8.jpg"/> </div> </div> <div class="box"> <div class="pic"> <img src="imgs/9.jpg"/> </div> </div> <div class="box"> <div class="pic"> <img src="imgs/10.jpg"/> </div> </div> <div class="box"> <div class="pic"> <img src="imgs/11.jpg"/> </div> </div> <div class="box"> <div class="pic"> <img src="imgs/12.jpg"/> </div> </div> <div class="box"> <div class="pic"> <img src="imgs/13.jpg"/> </div> </div> <div class="box"> <div class="pic"> <img src="imgs/14.jpg"/> </div> </div> <div class="box"> <div class="pic"> <img src="imgs/15.jpg"/> </div> </div> <div class="box"> <div class="pic"> <img src="imgs/16.jpg"/> </div> </div> <div class="box"> <div class="pic"> <img src="imgs/17.jpg"/> </div> </div> <div class="box"> <div class="pic"> <img src="imgs/18.jpg"/> </div> </div> <div class="box"> <div class="pic"> <img src="imgs/19.jpg"/> </div> </div> <div class="box"> <div class="pic"> <img src="imgs/20.jpg"/> </div> </div> <div class="box"> <div class="pic"> <img src="imgs/21.jpg"/> </div> </div> <div class="box"> <div class="pic"> <img src="imgs/22.jpg"/> </div> </div> <div class="box"> <div class="pic"> <img src="imgs/23.jpg"/> </div> </div> <div class="box"> <div class="pic"> <img src="imgs/24.jpg"/> </div> </div> <div class="box"> <div class="pic"> <img src="imgs/25.jpg"/> </div> </div> </div> </body> </html>
wf.css
@CHARSET "UTF-8"; *{margin:0;padding:0} #main{ position: relative; margin: 10px auto 0 auto; } .box{ float:left; padding: 0 0 15px 15px; } .pic{ border: 1px solid #ccc; padding: 10px; } .box img{ width: 200px; height: auto; }
wf.js
window.onload = function(){ waterfall(); //要加載的數(shù)據(jù),暫時(shí)寫一個(gè)固定數(shù)據(jù) var dataInt = {"data":[{"src":'3.jpg'},{"src":'13.jpg'},{"src":'23.jpg'},{"src":'1.jpg'}]}; //一個(gè)判斷拖動(dòng)滾動(dòng)條后是否加載新內(nèi)容的方法 window.onscroll = function(){ if(checkScrollSlide()){ //將數(shù)據(jù)塊渲染到當(dāng)前頁(yè)的尾部 for(var i = 0; i < dataInt.data.length;i++){ var parent = document.getElementById('main'); var newBox = document.createElement('p'); newBox.className = 'box'; parent.appendChild(newBox); var newPic = document.createElement('p'); newPic.className = 'pic'; newBox.appendChild(newPic); var newImg = document.createElement('img'); newImg.src = "./imgs/" + dataInt.data[i].src; newPic.appendChild(newImg); waterfall(); } } } } function waterfall(){ var parent = document.getElementById("main"); //寫一個(gè)方法根據(jù)類名box,找到所有節(jié)點(diǎn) var boxArr = getByClass(parent,'box'); //console.log(boxArr.length);//26,檢驗(yàn)是否獲取到 var bodyWidth = document.body.clientWidth; //document.body.clientWidth 窗口實(shí)時(shí)顯示時(shí)的body的寬度 var colWidth = boxArr[0].offsetWidth;//box p的寬度 var cols = Math.floor(bodyWidth / colWidth); //給main p一個(gè)寬度,從而讓顯示內(nèi)容不會(huì)隨著浮動(dòng),改變布局 var mainWidth = colWidth * cols; parent.style.cssText = 'width:' + mainWidth + 'px;'; var colsHeight = [];//放列高度的數(shù)組 for(var i = 0; i < boxArr.length;i++){ var iBox = boxArr[i]; if(i < cols){ colsHeight.push(iBox.offsetHeight); }else{ var rArr = searchMin(colsHeight); var index = rArr[0]; var minH = rArr[1]; var left = parseInt(index * colWidth); var top = minH; iBox.style.position = "absolute"; iBox.style.left = left + 'px'; iBox.style.top = top + 'px'; colsHeight[index] += iBox.offsetHeight; } } } function getByClass(parent,clsName){ //用通配符獲得prent下的所有標(biāo)簽節(jié)點(diǎn) var allTags = document.getElementsByTagName("*"); var arr = new Array(); for(var i = 0; i < allTags.length;i++){ if(allTags[i].className == clsName){ arr.push(allTags[i]); } } return arr; } function searchMin(arr){ var min = arr[0]; var index = 0; for(var j = 0; j < arr.length; j++){ if(arr[j] < min){ min = arr[j]; index = j; } } return [index,min]; } function checkScrollSlide(){ var parent = document.getElementById('main'); var boxArr = getByClass(parent,'box'); var lastBox = boxArr[boxArr.length-1]; var lbHeight = lastBox.offsetTop+Math.floor(lastBox.offsetHeight/2); console.log(lbHeight); var slideH = document.body.scrollTop || document.documentElement.scrollTop; console.log(slideH); var winH = document.body.clientHeight || document.documentElement.clientHeight; console.log(winH); var swHeight = slideH + winH; return (lbHeight < swHeight) ? true : false; }
關(guān)于如何實(shí)現(xiàn)瀑布流布局問題的解答就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,如果你還有很多疑惑沒有解開,可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識(shí)。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。