利用原生 JS 从零实现一个瀑布流插件

瀑布流布局的核心

瀑布流布局以等宽、不定高等的图片或内容块排列，在网页上形成一种自然生动的瀑布效果。这种布局通常用于展示图片、博客文章、社交媒体内容等。

原生 JS 实现瀑布流布局

以下步骤将引导您使用原生 JavaScript 实现一个瀑布流插件：

1. 定义 HTML 结构

首先，您需要定义一个容器元素来容纳瀑布流内容，并在其中放置内容元素。例如，您可以使用以下 HTML 结构：

<div id="瀑布流容器">
  <div class="瀑布流元素">...</div>
  <div class="瀑布流元素">...</div>
  <div class="瀑布流元素">...</div>
  ...
</div>

2. 定义 CSS 样式

接下来，您需要为容器元素和瀑布流元素添加 CSS 样式，以定义布局和外观。

#瀑布流容器 {
  width: 100%;
  column-count: 3;
  column-gap: 10px;
  margin: 0 auto;
}

.瀑布流元素 {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  background-color: #fff;
}

3. 获取瀑布流元素

使用 JavaScript 获取容器元素和所有瀑布流元素。

const 瀑布流容器 = document.getElementById("瀑布流容器");
const 瀑布流元素 = document.querySelectorAll(".瀑布流元素");

4. 计算瀑布流元素宽度

计算每个瀑布流元素的宽度，并将其存储在一个数组中。

const 瀑布流元素宽度 = [];
for (let i = 0; i < 瀑布流元素.length; i++) {
  瀑布流元素宽度.push(瀑布流元素[i].offsetWidth);
}

5. 实现瀑布流布局

核心算法来实现瀑布流布局。

function 布局瀑布流() {
  // 获取第一列的高度
  let 最短列高度 = 0;
  for (let i = 0; i < 瀑布流元素宽度.length; i++) {
    最短列高度 = Math.min(最短列高度, 瀑布流元素[i].offsetHeight);
  }

  // 将瀑布流元素分配到最短列
  let 当前列 = 0;
  for (let i = 0; i < 瀑布流元素宽度.length; i++) {
    if (瀑布流元素[i].offsetHeight > 最短列高度) {
      当前列++;
      最短列高度 = 瀑布流元素[i].offsetHeight;
    }
    瀑布流元素[i].style.gridColumn = `1 / span ${当前列}`;
  }
}

6. 窗口调整时重新布局瀑布流

添加一个窗口调整事件监听器，以便在窗口调整大小时重新布局瀑布流。

window.addEventListener("resize", 布局瀑布流);

7. 优化瀑布流性能

为了提高瀑布流的性能，您可以在以下方面进行优化：

• 仅在窗口调整大小或瀑布流元素发生变化时重新布局瀑布流。
• 使用 CSS grid 布局代替 column-count 属性来实现瀑布流布局。

结语

至此，您已经创建了一个使用原生 JavaScript 实现的瀑布流插件。通过这种方式，您可以轻松地为您的网站添加瀑布流布局，并呈现更加美观和动态的视觉效果。