瀑布流布局的两种实现方式：传统多列浮动和绝对定位布局

瀑布流布局常用于图片展示等卡片式布局，实现方式主要有两种：传统多列浮动和绝对定位布局。

瀑布流布局常用于图片展示等卡片式布局，实现方式主要有两种：传统多列浮动和绝对定位布局。

传统多列浮动方式

在 HTML 结构中创建多个元素，并为每个元素设置相同的 class，然后使用 CSS 样式进行布局。

HTML 结构示例：

<div class="waterfall">
  <div class="column">
    <img src="image1.jpg">
  </div>
  <div class="column">
    <img src="image2.jpg">
  </div>
  <div class="column">
    <img src="image3.jpg">
  </div>
  <div class="column">
    <img src="image4.jpg">
  </div>
</div>

CSS 样式示例：

.waterfall {
  column-count: 4; // 列数
  column-gap: 10px; // 列间距
}

.column {
  display: inline-block;
  width: 100%; // 或者使用宽度百分比
  margin-bottom: 10px; // 元素间距
}

在上面的示例中，我们使用 column-count 属性指定了列数，使用 column-gap 属性指定了列间距。同时，给每个元素设置了 display: inline-block 属性，让其在一行内显示。

绝对定位布局方式

另一种实现方式是使用绝对定位布局，该方式将所有元素定位在相同的容器内。为了实现瀑布流式布局，我们需要计算每一列的高度，然后将下一个要添加的元素添加到高度最小的一列中。

HTML 结构示例：

<div class="waterfall">
  <div class="card" style="height: 200px;">
    <img src="image1.jpg">
  </div>
  <div class="card" style="height: 280px;">
    <img src="image2.jpg">
  </div>
  <div class="card" style="height: 150px;">
    <img src="image3.jpg">
  </div>
  <div class="card" style="height: 220px;">
    <img src="image4.jpg">
  </div>
</div>

CSS 样式示例：

.waterfall {
  position: relative;
  width: 100%;
}

.card {
  position: absolute;
  width: 25%; // 列宽度
  top: 0;
  left: 0;
  margin: 10px; // 元素间距
  box-sizing: border-box;
}

.card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

在上面的示例中，我们将容器 .waterfall 设置为相对定位，每个元素 .card 设置为绝对定位，调整其位置和大小，同时给每个元素的图片设置了 object-fit: cover 属性，让图片能够填充容器。

最后，我们需要使用 JS 脚本计算每一列的高度，然后将下一个要添加的元素添加到高度最小的一列中。

示例：

const cards = document.querySelectorAll('.card');
const columns = 4; // 列数
const margin = 10; // 元素间距
const heights = new Array(columns).fill(0);

cards.forEach(card => {
  const minIndex = heights.indexOf(Math.min(...heights)); // 找到高度最小的列
  const top = heights[minIndex];
  const left = (card.offsetWidth + margin) * minIndex;

  card.style.top = `${top}px`;
  card.style.left = `${left}px`;
  heights[minIndex] += card.offsetHeight + margin;
});

上面的 JS 示例中，我们定义了 columns 和 margin 变量，分别表示列数和元素间距。然后，我们定义了一个高度数组 heights，初始化为 0。遍历每个元素，找到高度最小的一列，计算元素的上边距和左边距，并设置到元素上。最后，将高度累加到高度数组 heights 中。

通过上述两种方式的介绍，我们可以实现一个瀑布流式的图片墙等卡片式布局，呈现不同的美丽和舒适的交互体验。