手把手教你用js实现瀑布流布局

1. 什么是瀑布流布局

瀑布流布局是现代网页设计中非常流行的一种页面布局方式，它的特点是页面中的元素像瀑布一样自上而下依次排列，但每个元素的宽度是相等的。这种布局方式可以增加页面的动态感，同时也可以方便地展示图片、新闻和产品信息等。

2. 编写瀑布流布局的思路

2.1 HTML 代码结构

在瀑布流布局中，每个元素的宽度是相等的，但高度可以不同，因此我们需要使用 CSS 的 column-count 属性来指定每一列的宽度，而元素的位置和高度则需要通过 JavaScript 动态计算。

首先，我们需要创建一个包含所有元素的容器，假设它有一个 id 为 "waterfall" 的标签：

<div id="waterfall">

  <div class="waterfall-item">
    <img src="image1.jpg">
  </div>
  <div class="waterfall-item">
    <img src="image2.jpg">
  </div>
  ...
</div>

其中，每个 <div class="waterfall-item"> 表示一个瀑布流中的元素。为了实现瀑布流效果，每个元素的样式应该包括以下属性：

宽度固定，通常为一定比例的屏幕宽度；

位置使用 CSS 的定位属性来确定；

高度通过 JavaScript 动态计算。

2.2 计算元素位置和高度

为了实现瀑布流布局，我们需要通过 JavaScript 动态计算每个元素的位置和高度。这里我们提供一种简单的计算方式：

首先确定每一列的宽度（即容器宽度除以列数），并将每列的高度初始化为 0。

var containerWidth = document.getElementById('waterfall').offsetWidth;  // 获取容器宽度

var columnCount = 3;   // 假设有 3 列
var columnWidth = containerWidth / columnCount;  // 计算每一列的宽度
var columnHeights = new Array(columnCount).fill(0);  // 初始化每一列的高度为 0

遍历每个元素，计算它的位置和高度。

var items = document.getElementsByClassName('waterfall-item');

for (var i = 0; i < items.length; i++) {
  // 在最矮的一列中插入元素
  var minHeight = Math.min.apply(null, columnHeights);
  var columnIndex = columnHeights.indexOf(minHeight);
  items[i].style.left = columnIndex * columnWidth + 'px';
  items[i].style.top = minHeight + 'px';
  
  // 更新该列的高度
  columnHeights[columnIndex] += items[i].offsetHeight;
}

当遍历完成后，我们可以获取每一列的最大高度，并将容器的高度设置为最大高度，以确保所有元素都能被正常显示。

var maxHeight = Math.max.apply(null, columnHeights);

document.getElementById('waterfall').style.height = maxHeight + 'px';

3. 完整的 JavaScript 代码

var containerWidth = document.getElementById('waterfall').offsetWidth;

var columnCount = 3;
var columnWidth = containerWidth / columnCount;
var columnHeights = new Array(columnCount).fill(0);
var items = document.getElementsByClassName('waterfall-item');
for (var i = 0; i < items.length; i++) {
  var minHeight = Math.min.apply(null, columnHeights);
  var columnIndex = columnHeights.indexOf(minHeight);
  items[i].style.left = columnIndex * columnWidth + 'px';
  items[i].style.top = minHeight + 'px';
  columnHeights[columnIndex] += items[i].offsetHeight;
}
var maxHeight = Math.max.apply(null, columnHeights);
document.getElementById('waterfall').style.height = maxHeight + 'px';

4. 实例展示

下面是一个简单的瀑布流布局实例，您可以复制以上代码并运行该实例，通过调整列数和容器宽度等参数，自定义您的瀑布流布局。

5. 结语

瀑布流布局是一种非常流行的网页设计方式，它可以增加页面的动态感和信息密度，同时也可以优化用户体验。在实现瀑布流布局时，我们主要需要注意容器的宽度、每列的宽度，以及元素的位置和高度计算方法等问题。如果您想要实现多种排版或手动排版的网页，那么瀑布流布局将是非常有用的工具。