JavaScript小技巧：实现一个简单的瀑布流布局

瀑布流布局是一种常见的网页布局方式，它能够创建一个动态的、响应式的网格，使得图片或者其他内容能够按照一定规则排列，形成瀑布一样的流动效果。在本文中，我们将使用纯JavaScript来实现一个简单的瀑布流布局。

HTML结构

我们需要一个简单的HTML结构来容纳我们的瀑布流布局。通常，一个容器元素如<div>可以用来表示每列，而子元素<div>用来表示每行的每个单元格。

<div id="waterfall" class="waterfall">
  <div class="column">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell">3</div>
  </div>
  <div class="column">
    <div class="cell">4</div>
    <div class="cell">5</div>
    <div class="cell">6</div>
  </div>
  <!-- 更多列和单元格 -->
</div>

CSS样式

接下来，我们需要一些CSS样式来让这些单元格看起来像是瀑布流。我们可以使用flexbox布局来轻松实现这一点。

.waterfall {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.column {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.cell {
  /* 设定单元格大小 */
  width: 100px;
  height: 100px;
  background-color: #f0f0f0;
  margin: 5px;
}

JavaScript实现

我们将使用JavaScript来动态生成瀑布流的内容。

function createWaterfall() {
  // 创建列
  for (let i = 0; i < 4; i++) {
    const column = document.createElement('div');
    column.classList.add('column');
    document.getElementById('waterfall').appendChild(column);

    // 创建单元格，随机决定每个单元格的内容
    for (let j = 0; j < Math.floor(Math.random() * 9) + 3; j++) {
      const cell = document.createElement('div');
      cell.classList.add('cell');
      cell.textContent = `Cell ${i}-${j}`;
      column.appendChild(cell);
    }
  }
}

createWaterfall();

这段代码首先创建了4列，然后在每列中随机生成3到9个单元格。每个单元格包含一个从"Cell X-Y"格式的文本，其中X是列号，Y是单元格号。

瀑布流布局的动态调整

为了使瀑布流更加逼真，我们可以添加一些动态调整的逻辑。当新的内容被加入时，我们可以计算每列的高度，然后重新分配内容到较短的列中，保持整体的水平流动性。

function adjustWaterfall() {
  const columns = document.querySelectorAll('.column');
  let maxHeight = 0;
  let columnIndex = 0;

  columns.forEach((column, index) => {
    if (column.offsetHeight > maxHeight) {
      maxHeight = column.offsetHeight;
      columnIndex = index;
    }
  });

  // 移动最高的列中的一个单元格到其他列
  const highestColumn = columns[columnIndex];
  const cellToMove = highestColumn.children[0];
  const newColumnIndex = columnIndex === 0 ? 1 : 0;
  const newColumn = columns[newColumnIndex];

  newColumn.appendChild(cellToMove);

  // 重新调整瀑布流
  requestAnimationFrame(adjustWaterfall);
}

adjustWaterfall();

这段代码通过寻找最高的列并将该列中的第一个单元格移动到旁边一列的最前面，从而创建一个动态流动的效果。我们使用requestAnimationFrame来节