当前位置：首页 > 全部内容 > JavaScript实现瀑布流布局完整教程

JavaScript实现瀑布流布局完整教程

作者：代码拾荒时间：2026-10-22 03:53:24浏览：351

本文详细解析如何使用JavaScript实现瀑布流布局，涵盖HTML结构、CSS样式及核心JS算法。通过获取元素宽度计算列数，利用数组记录每列高度并动态定位图片，实现等宽不等高数据的自动排列，适用于图片展示类网站。

瀑布流布局概述

首先介绍瀑布流布局的概念。

这种布局由一组宽度相同但高度各异的数据块组成，效果如图：

瀑布流布局概述

目前许多网站如蘑菇街、美丽说等均采用此类布局。要实现它，需理解其排列逻辑：每行的列数由图片宽度与页面总宽度的比例决定。第一行按顺序排列，后续数据块则依次插入到当前高度最低的列中。

HTML与CSS基础框架

接下来构建基础框架。


<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个图片，每个图片均被class为box和pic的div包裹，并在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>

效果展示如下：

瀑布流布局概述

虽然每行显示的图片数量并非固定，窗口缩小时列数会变化（如变为两列或三列），但为了后续布局方便，我们将其设定为固定列数，即通过窗口大小除以图片宽度后向下取整得出。

JavaScript核心实现

随后编写实现瀑布流布局的JavaScript代码。在编码前，由于原生JS没有直接获取class的方法，我们需要先编写一个辅助函数：


function getByClass(parent,className){

 var boxArr = new Array();//用来获取所有class为box的元素

 oElement = parent.getElementsByTagName('*');

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

  if(oElement[i].className == className){

   boxArr.push(oElement[i]);

  }
 };
 return boxArr;
}

该函数接收两个参数：父元素对象和要查找的类名字符串。

接着编写核心布局函数：


//首先在onload函数中调用函数

window.onload = function(){
 waterFull('main','box');
}


function waterFull(parent,children){

 //先获得父元素及其底下所有的class = box的元素
 var oParent = document.getElementById(parent);
 var oBoxs = getByClass(oParent,children);

//我们在前面说过，数据块的列数我们是希望不变的。由于每个数据块都是等宽的，所以可以以第一个数据块的宽度为准，获得数据块的宽度。再计算数据块的列数，向下取整。
 var oBoxW = oBoxs[0].offsetWidth;
 var cols = Math.floor(document.documentElement.clientWidth/oBoxW);

接下来设置父元素的样式，我们需要获得它的宽度，并且使其居中
oParent.style.cssText = 'width:' cols * oBoxW + 'px; margin: 0 auto';

//在定义好了所有的样式之后，就是排列数据块。首先第一行是直接排列的。定义一个数组存放每一列的高度，从第二行开始，使得每一个数据块都排在高度最低的那一列。首先得遍历所有的box，即oBoxs

var arrH = []; //定义数组存放每一列的高度
for(var i = 0; i< oBoxs.length; i++){
 //当是第一行时，直接将数据块依次排列，并在数组中记录每一列的高度
 if(i < cols){
  arrH[i] = oBoxs[i].offsetHeight;
 }
 //当i>cols时，即要对前面的所有列的高度进行遍历，将下一个图片放在合适的位置。
 else{
 //首先在数组中找到高度最低的列数。我们都知道有Math.min可以找到最小的数字，但是它接受的参数必须是一组数字，所以在这里我们要用Math.min.apply()方法

 var minH = Math.min.apply(null, arrH); //定义一个变量，存放数组中最小的高度

 //在找出了最小高度之后，我们需要知道它的索引，才能够为接下来的数据块找到合适的位置，所以在下面又定义了一个找出最小值下标的函数。

 //定义一个变量去接受getMinhIndex函数的返回值
 var minIndex = getMinhIndex(arrH,minH);

 //在获得了高度最小的列数的索引后，就可以将下一个元素放到合适的位置
 oBoxs[i].style.position = 'absolute';
 oBoxs[i].style.top = minH + 'px';
 oBoxs[i].style.left = minIndex * oBoxW + 'px';

 //将当前的数据块终于都放到了合适的位置，但不要忘了更新arrH数组
 arrH[minIndex] += oBoxs[i].offsetHeight; 
 }

}

}


//获取当前最小值得下标
function getMinhIndex(array,min){

 for(var i in array){

  if(array[i] == min)

   return i;
 }
}

以上即为完整的瀑布流布局JS实现代码，效果如图：

瀑布流布局概述

附上完整源代码：

JavaScript代码部分：


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);

 //计算整个页面显示的列数

 var oBoxW = oBoxs[0].offsetWidth;

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

 //设置main的宽度，并且居中

 oParent.style.cssText = 'width:'+oBoxW * cols +'px; margin: 0 auto';

 //找出高度最小的图片，将下一个图片放在下面

 //定义一个数组，存放每一列的高度，初始化存的是第一行的所有列的高度

 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();//用来获取所有class为box的元素

 oElement = parent.getElementsByTagName('*');

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

  if(oElement[i].className == className){

   boxArr.push(oElement[i]);

  }
 };
 return boxArr;
}


//获取当前最小值得下标
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>

以上就是本文的全部内容，希望能为您的学习提供帮助，也欢迎大家继续支持本站。

作者最新文章

JavaScript异步发送HTTP请求时怎么优雅地处理错误

2026-11-05 17:10:44

5款主流JS在线运行工具对比：CodePen、JSFiddle与StackBlitz怎么选

2026-11-05 17:04:04

JavaScript入门书籍避坑：这些书不适合初学者

2026-11-05 16:31:15

JS使用Math.round实现保留两位小数的原理与代码

2026-11-05 15:35:55

JavaScript 原生 Date 对象怎么实现日期加减

2026-11-05 14:30:00