瀑布流布局完成的代碼
發(fā)表時(shí)間：2023-09-06 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：
[摘要]這篇文章給大家介紹的內(nèi)容是關(guān)于瀑布流布局實(shí)現(xiàn)的代碼，有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你有所幫助。index.html<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"...
這篇文章給大家介紹的內(nèi)容是關(guān)于瀑布流布局實(shí)現(xiàn)的代碼，有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你有所幫助。
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>@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;
}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)前頁的尾部
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)文章推薦：
div標(biāo)簽：水平居中和垂直居中的實(shí)現(xiàn)（附代碼）
css box-sizing屬性（盒子模型）的用法介紹
以上就是瀑布流布局實(shí)現(xiàn)的代碼的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。
