JavaScript 实现瀑布流布局的原理与代码

作者：半夏时间：2026-10-23 19:32:39浏览：140

本文详细介绍如何使用 JavaScript 实现瀑布流布局。核心原理是计算列数并维护每列高度数组，将元素依次分配给高度最小的列。文章提供了基于 jQuery 的完整实现代码，包括获取容器宽度、计算列数、绝对定位及动态更新高度等关键步骤，适合前端开发者参考学习。

瀑布流布局概述

本文分享了使用 JavaScript 实现瀑布流布局的具体代码，供读者参考。

核心实现原理

实现原理如下：

1、瀑布流布局，要求进行布局的元素等宽，然后计算元素的宽与浏览器的宽度之比，得到需要布置的列数。 2、创建一个数组，长度为列数，数组元素为每一列已布置元素的总高度。（一开始为0）。 3、将未布置的元素，依次布置到高度最小的那一列，然后更新这一列的高度，就得到了瀑布流布局

瀑布流布局概述

代码实现细节

具体实现步骤：

布局结构：


<body>
 <div id="content">
  <div id="box">
  <img src="" >
  </div>
  <div id="box">
  <img src="" >
  </div>
  <div id="box">
  <img src="" >
  </div>
  <div id="box">
  <img src="" >
  </div>
  <div id="box">
  <img src="" >
  </div>
  <div id="box">
  <img src="" >
  </div>
  <div id="box">
  <img src="" >
  </div>
  <!-- 很多很多图片 -->
 </div>
</body>

JavaScript 代码实现：


$(function(){
 waterFall();
})
function waterFall(){
 //计算出每个图片盒子的宽度
 var box = $('#box');
 var boxWidth = box.outerWidth();
 //计算出屏幕的宽度
 var screenWidth = $(window).width();
 //计算出有多少列
 var cols = parseInt(screenWidth / boxWidth);
 //定义一行图片盒子的高度数组,找出数组中最少的值
 var heigthArr =[];
 //所有图片循环
 $.each(box,function(item,index){
 var boxHeigth = box.outerHeigth();
 //判断是否第一排
 if(index < cols){
  //如果是第一排,取高度,追加到数组中
  heigthArr[index] = boxHeigth;
 }else{
  //最小图片高度
  var minBoxHeigth = Math.min.apply(null,heigthArr);
  //最小图片的索引
  var minBoxIndex = $.inArray(minBoxHeigth,heigthArr);
  $(item).css({
  position:'absolute',
  left:minBoxIndex * boxWidth + 'px',
  top:minBoxHeigth + 'px'
  });
  heigthArr[minBoxIndex]+=boxHeigth;//更新高度
 }
 })
}

以上就是本文的全部内容，希望对各位的学习有所帮助，也欢迎大家继续支持本站。

作者最新文章

JavaScript闭包与类(Class)的区别及适用场景对比

2026-11-05 15:48:57

JavaScript入门要学ES6吗？let与箭头函数等新特性解析

2026-11-05 14:49:16

JavaScript 8种数据类型详解：基本类型与引用类型的区别

2026-11-05 14:25:15

怎么在JavaScript中使用async/await优化Ajax异步流程

2026-11-05 13:56:15

JavaScript replace回调函数实现动态正则替换逻辑

2026-11-05 13:52:13