基于JavaScript实现瀑布流布局

更新时间：2026-07-14 12:38:13作者：fang

本文实例讲解了原生JavaScript实现瀑布流布局详细代码，分享给大家供大家参考，具体内容如下

效果图：

基于JavaScript实现瀑布流布局

具体代码：

HTML

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

CSS代码：

margin: 0px;

padding: 0px;

}

#container{

position: relative;

}

.box{

padding: 5px;

float: left;

}

.box_img{

padding: 5px;

border: 1px solid #cccccc;

box-shadow: 0 0 5px #ccc;

border-radius: 5px;

}

.box_img img{

width: 150px;

height:auto;

}

js代码：

window.onload=function(){

imgLocation("container","box");

var imgData={

"data":[

{"src":"2.jpg"},

{"src":"3.jpg"},

{"src":"4.jpg"},

{"src":"5.jpg"},

{"src":"6.jpg"},

{"src":"7.jpg"},

{"src":"8.jpg"},

]

};

window.onscroll=function(){

if (checkFlag()) {

var cparent=document.getElementById("container");

for (var i = 0; i < imgData.data.length; i++) {

var ccontent=document.createElement("div");

ccontent.className="box";

cparent.appendChild(ccontent);

var boximg=document.createElement("div");

boximg.className="box_img";

ccontent.appendChild(boximg);

var img=document.createElement("img");

img.src="images/"+imgData.data[i].src;

boximg.appendChild(img);

}

imgLocation("container","box");

}

function checkFlag(){

var cparent=document.getElementById("container");

var ccontent=getChildnode(cparent,"box");

var lastContentHeight=ccontent[ccontent.length-1].offsetTop;

var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;

var pageHeight=document.documentElement.clientHeight||document.body.clientHeight;

if (lastContentHeight<scrollTop+pageHeight) {

return true;

}

function imgLocation(parent,content){

var cparent=document.getElementById(parent);

var ccontent=getChildnode(cparent,content);

var imgWidth=ccontent[0].offsetWidth;

var cols=Math.floor(document.documentElement.clientWidth/imgWidth);

cparent.style.cssText="width:"+imgWidth*cols+"px;margin:0 auto";

//把第二排的左起第一张图片放到第一排高度最小的那张下面

var imgHeightArr=[];

for (var i = 0; i < ccontent.length; i++) {

if (i<cols) {

imgHeightArr[i]=ccontent[i].offsetHeight;

}else{

var minHeight=Math.min.apply(null,imgHeightArr);

var minHeightIndex=getMinHeightLoc(imgHeightArr,minHeight);

console.log("minHeightIndex"+minHeightIndex);

ccontent[i].style.position="absolute";

ccontent[i].style.top=minHeight+"px";

ccontent[i].style.left=ccontent[minHeightIndex].offsetLeft+"px";

imgHeightArr[minHeightIndex]=imgHeightArr[minHeightIndex]+ccontent[i].offsetHeight;

console.log(imgHeightArr[i]);

console.log("高度最低:"+minHeight);

}

function getChildnode(parent,content){

var contentArr=[];

var allcontent=parent.getElementsByTagName("*");

for (var i = 0; i < allcontent.length; i++) {

if(allcontent[i].className==content){

contentArr.push(allcontent[i]);

}

};

return contentArr;

}

function getMinHeightLoc(imgHeightArr,minHeight){

for(var i in imgHeightArr){

if (imgHeightArr[i]==minHeight) {

return i;

}

希望本文所述对大家学习javascript程序设计有所帮助。