js原生代码写瀑布流

瀑布流布局是一种流行的网页布局方式，它允许页面元素（通常是图片或卡片）按照不同的高度排列，形成类似瀑布的视觉效果。这种布局方式在展示大量内容时非常有效，因为它可以充分利用屏幕空间，提高用户的浏览体验。

基础概念

瀑布流布局的核心思想是将页面分成多列，然后将内容动态地填充到这些列中，使得每列的高度尽可能接近，从而形成瀑布状的视觉效果。

优势

空间利用率高：能够更好地利用屏幕空间，尤其是在移动设备上。
视觉效果好：自然流畅的布局给人以美观的感觉。
加载性能优化：可以实现按需加载，即当用户滚动到页面底部时再加载更多内容。

类型

固定列数瀑布流：页面固定分为几列，内容填充到各列中。
自适应列数瀑布流：根据屏幕宽度动态调整列数。

应用场景

图片画廊：如摄影作品展示、商品列表等。
新闻资讯：文章摘要的展示。
社交媒体：用户动态、帖子等。

实现方法

以下是一个简单的JavaScript原生代码实现瀑布流布局的例子：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>瀑布流布局示例</title>
<style>
  .masonry {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 100vh; /* 视口高度 */
  }
  .item {
    width: calc(25% - 10px); /* 假设四列布局，减去间距 */
    margin: 5px;
    background: #ccc;
    box-sizing: border-box;
  }
</style>
</head>
<body>
<div class="masonry" id="masonry">
  <!-- 内容将通过JavaScript动态添加到这里 -->
</div>

<script>
function createMasonryLayout(containerId, items) {
  const container = document.getElementById(containerId);
  let columns = [];
  let columnHeights = new Array(4).fill(0); // 假设四列布局

  items.forEach((item, index) => {
    const columnIndex = columnHeights.indexOf(Math.min(...columnHeights));
    const div = document.createElement('div');
    div.className = 'item';
    div.style.height = `${Math.floor(Math.random() * 200 + 100)}px`; // 随机高度
    div.textContent = `Item ${index + 1}`;
    container.appendChild(div);

    columns[columnIndex] = columns[columnIndex] || [];
    columns[columnIndex].push(div);
    columnHeights[columnIndex] += parseInt(div.style.height) + 10; // 加上间距
  });

  // 调整容器高度以适应最长的列
  container.style.height = `${Math.max(...columnHeights)}px`;
}

// 示例数据
const items = Array.from({ length: 20 }, (_, i) => ({ id: i }));
createMasonryLayout('masonry', items);
</script>
</body>
</html>