如何通过JavaScript实现网页瀑布流效果？

本文共计1414个文字，预计阅读时间需要6分钟。

目录+前言：+什么是瀑布流布局：+如何实现：+1. 获取图片+2. 设置图片宽度+3. 计算浏览器页面一行最多能存放的图片数量+4. 比较图片高度+5. 获取一行中高度最小的图片位置+6. 插入图片

目录

• 前言：
• 什么是瀑布流布局：
• 如何实现：
• 1. 获取图片
• 2. 设置图片宽带
• 3. 计算浏览器页面一行最多能存放图片的数量
• 4. 比较图片高度
  
• 5. 得到上一行中最小高度图片的位置
• 6. 插图
• 完整代码如下：

前言：

瀑布流 又称瀑布流式布局，是比较流行的一种网站页面布局方式。即多行等宽元素排列，后面的元素依次添加到其后，等宽不等高，根据图片原比例缩放直至宽度达到我们的要求，依次按照规则放入指定位置。

什么是瀑布流布局：

先看效果：

• 图片多行等宽元素排列，后面的元素依次添加到其后，等宽不等高，根据图片原比例缩放直至宽度达到我们的要求，依次按照规则放入指定位置。