前端js实现瀑布图代码

<div id="waterfall">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
  <div class="item">Item 7</div>
  <div class="item">Item 8</div>
  <div class="item">Item 9</div>
  <div class="item">Item 10</div>
  <div class="item">Item 11</div>
  <div class="item">Item 12</div>
</div>

#waterfall {
  column-count: 3; /* 列数为3 */
  column-gap: 20px; /* 列间距为20px */
}
.item {
  margin-bottom: 20px; /* 每个item的底部间距为20px */
  break-inside: avoid; /* 避免item跨列铺满 */
}

function waterfall() {
  const waterfall = document.getElementById('waterfall'); // 获取瀑布流容器
  const items = waterfall.querySelectorAll('.item'); // 获取所有item
  let cellWidth = items[0].offsetWidth; // 计算item的宽度
  let cellMarginRight = parseInt(window.getComputedStyle(items[0]).marginRight); // 计算item的右边距
  let containerWidth = waterfall.offsetWidth; // 获取容器宽度
  let colNum = parseInt(containerWidth / (cellWidth + cellMarginRight)); // 计算出列数
  let colHeight = new Array(colNum).fill(0); // 创建一个长度为列数的数组，用于存储每列的高度
  for (let i = 0; i < items.length; i++) {
    let item = items[i];
    let minHeight = Math.min(...colHeight); // 获取最小高度的列
    let minIndex = colHeight.indexOf(minHeight); // 获取最小高度的列的索引
    item.style.position = 'absolute'; // 设置item为绝对定位
    item.style.left = minIndex * (cellWidth + cellMarginRight) + 'px'; // 计算item的left值
    item.style.top = colHeight[minIndex] + 'px'; // 计算item的top值
    colHeight[minIndex] += item.offsetHeight + cellMarginRight; // 更新当前列的高度
    waterfall.style.height = Math.max(...colHeight) + 'px'; // 更新瀑布流容器的高度
  }
}
// 监听窗口变化，重新计算瀑布流
window.onresize = function() {
  waterfall();
}
// 页面加载时计算瀑布流
window.onload = function() {
  waterfall();
}