js瀑布流怎么写

<div id="container">
  <div class="item">...</div>
  <div class="item">...</div>
  <!-- 更多的.item元素 -->
</div>

#container {
  position: relative;
}

.item {
  position: absolute;
  width: 200px; /* 每个item的宽度 */
  margin-bottom: 10px; /* item之间的间距 */
}

function waterfall(container, items, columnWidth) {
  const containerWidth = container.clientWidth;
  const columns = Math.floor(containerWidth / columnWidth);
  const columnHeights = new Array(columns).fill(0);
  const columnOffsets = new Array(columns).fill(0);

  items.forEach((item, index) => {
    const columnIndex = columnHeights.indexOf(Math.min(...columnHeights));
    item.style.left = `${columnOffsets[columnIndex]}px`;
    item.style.top = `${columnHeights[columnIndex]}px`;
    columnHeights[columnIndex] += item.clientHeight + 10; // 加上间距
    columnOffsets[columnIndex] += columnWidth;
  });

  container.style.height = `${Math.max(...columnHeights)}px`;
}

window.onload = function() {
  const container = document.getElementById('container');
  const items = container.getElementsByClassName('item');
  const columnWidth = 200; // 每列的宽度

  waterfall(container, items, columnWidth);

  window.onresize = function() {
    // 当窗口大小变化时重新布局
    waterfall(container, items, columnWidth);
  };
};