<template>
  <div class="waterfall-css">
    <div 
      class="waterfall-item" 
      v-for="(item, index) in list" 
      :key="index"
    >
      <img :src="item.img" alt="瀑布流圖片" class="item-img" />
      <p class="item-desc">{{ item.desc }}</p>
    </div>
  </div>
</template>
 
<script setup>
import { ref } from 'vue';
 
// 模擬瀑布流數(shù)據(jù)
const list = ref([
  { img: 'https://picsum.photos/300/400?1', desc: '圖片1' },
  { img: 'https://picsum.photos/300/300?2', desc: '圖片2' },
  { img: 'https://picsum.photos/300/500?3', desc: '圖片3' },
  { img: 'https://picsum.photos/300/200?4', desc: '圖片4' },
  { img: 'https://picsum.photos/300/600?5', desc: '圖片5' },
  { img: 'https://picsum.photos/300/350?6', desc: '圖片6' },
]);
</script>
 
<style scoped>
/* 瀑布流容器 */
.waterfall-css {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  /* 核心：拆分為3列 */
  column-count: 3;
  /* 列間距 */
  column-gap: 16px;
  padding: 16px;
}
 
/* 瀑布流項(xiàng)（避免跨列斷裂） */
.waterfall-item {
  /* 關(guān)鍵：禁止跨列 */
  break-inside: avoid;
  margin-bottom: 16px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  overflow: hidden;
}
 
/* 圖片自適應(yīng) */
.item-img {
  width: 100%;
  height: auto;
  display: block;
}
 
.item-desc {
  padding: 12px;
  font-size: 14px;
  color: #333;
}
 
/* 響應(yīng)式適配 */
@media (max-width: 768px) {
  .waterfall-css {
    column-count: 2; /* 移動(dòng)端2列 */
  }
}
@media (max-width: 480px) {
  .waterfall-css {
    column-count: 1; /* 小屏1列 */
  }
}
</style>

<template>
  <div class="waterfall-grid">
    <div 
      class="waterfall-item" 
      v-for="(item, index) in list" 
      :key="index"
    >
      <img :src="item.img" alt="" class="item-img" />
    </div>
  </div>
</template>
 
<script setup>
import { ref } from 'vue';
const list = ref([/* 同上文數(shù)據(jù) */]);
</script>
 
<style scoped>
.waterfall-grid {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px;
  /* Grid 核心配置 */
  display: grid;
  /* 3列，列寬自適應(yīng)，間距16px */
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 16px;
  /* 行高自適應(yīng)（關(guān)鍵） */
  grid-auto-rows: minmax(100px, auto);
}
 
.waterfall-item {
  border-radius: 8px;
  overflow: hidden;
}
 
.item-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
 
/* 響應(yīng)式 */
@media (max-width: 768px) {
  .waterfall-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
</style>

<template>
  <div class="waterfall-js" ref="waterfallRef">
    <!-- 列容器（動(dòng)態(tài)生成） -->
    <div 
      class="waterfall-column" 
      v-for="(col, index) in columnList" 
      :key="index"
      ref="columnRefs"
    >
      <!-- 列內(nèi)元素 -->
      <div 
        class="waterfall-item" 
        v-for="item in col" 
        :key="item.id"
        @load="handleImgLoad(item.id)"
      >
        <img 
          :src="item.img" 
          alt="" 
          class="item-img"
          :data-id="item.id"
          loading="lazy" <!-- 原生懶加載 -->
        />
        <p class="item-desc">{{ item.desc }}</p>
      </div>
    </div>
    <!-- 加載更多 -->
    <div class="load-more" v-if="hasMore" @click="loadMore">加載更多</div>
    <div class="no-more" v-else>沒(méi)有更多數(shù)據(jù)了</div>
  </div>
</template>
 
<script setup>
import { ref, onMounted, onResize, nextTick } from 'vue';
 
// 核心變量
const waterfallRef = ref(null); // 瀑布流容器
const columnRefs = ref([]); // 列容器引用
const columnCount = ref(3); // 列數(shù)（默認(rèn)3列）
const columnHeights = ref([]); // 每列的高度
const columnList = ref([]); // 每列的元素列表
const hasMore = ref(true); // 是否有更多數(shù)據(jù)
let page = 1; // 當(dāng)前頁(yè)碼
 
// 初始化列
const initColumns = () => {
  // 根據(jù)屏幕寬度設(shè)置列數(shù)
  const width = document.documentElement.clientWidth;
  if (width <= 480) {
    columnCount.value = 1;
  } else if (width <= 768) {
    columnCount.value = 2;
  } else {
    columnCount.value = 3;
  }
  // 重置列數(shù)據(jù)
  columnList.value = Array.from({ length: columnCount.value }, () => []);
  columnHeights.value = Array(columnCount.value).fill(0);
};
 
// 模擬請(qǐng)求數(shù)據(jù)
const fetchData = async (pageNum) => {
  // 模擬接口延遲
  await new Promise(resolve => setTimeout(resolve, 500));
  const mockData = Array.from({ length: 9 }, (_, i) => ({
    id: `${pageNum}-${i}`,
    img: `https://picsum.photos/300/${200 + Math.random() * 400 | 0}?${pageNum}-${i}`,
    desc: `第${pageNum}頁(yè)-${i+1}條`
  }));
  return mockData;
};
 
// 分配元素到最短列
const assignToShortestColumn = (data) => {
  data.forEach(item => {
    // 找到最短列的索引
    const minHeightIndex = columnHeights.value.indexOf(Math.min(...columnHeights.value));
    // 插入元素
    columnList.value[minHeightIndex].push(item);
    // 預(yù)估值（圖片加載前先占位，避免高度計(jì)算偏差）
    columnHeights.value[minHeightIndex] += 300; // 臨時(shí)占位高度
  });
};
 
// 圖片加載完成后更新列高度
const handleImgLoad = (id) => {
  nextTick(() => {
    // 找到當(dāng)前圖片元素
    const img = document.querySelector(`img[data-id="${id}"]`);
    if (!img) return;
    const item = img.closest('.waterfall-item');
    const column = item.closest('.waterfall-column');
    // 找到列索引
    const colIndex = columnRefs.value.findIndex(col => col === column);
    if (colIndex === -1) return;
    // 重新計(jì)算列高度
    columnHeights.value[colIndex] = column.offsetHeight;
  });
};
 
// 加載更多數(shù)據(jù)
const loadMore = async () => {
  const data = await fetchData(page);
  if (data.length === 0) {
    hasMore.value = false;
    return;
  }
  assignToShortestColumn(data);
  page++;
};
 
// 窗口大小變化時(shí)重新布局
const handleResize = () => {
  initColumns();
  // 重新分配所有數(shù)據(jù)（合并所有列數(shù)據(jù)）
  const allData = columnList.value.flat();
  columnList.value = Array.from({ length: columnCount.value }, () => []);
  columnHeights.value = Array(columnCount.value).fill(0);
  assignToShortestColumn(allData);
};
 
// 初始化
onMounted(() => {
  initColumns();
  loadMore();
  // 監(jiān)聽(tīng)窗口變化（Vue3 內(nèi)置 onResize）
  onResize(handleResize);
});
</script>
 
<style scoped>
.waterfall-js {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px;
  /* 彈性布局實(shí)現(xiàn)列并排 */
  display: flex;
  gap: 16px; /* 列間距 */
}
 
.waterfall-column {
  /* 列寬均分 */
  flex: 1;
}
 
.waterfall-item {
  margin-bottom: 16px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  overflow: hidden;
}
 
.item-img {
  width: 100%;
  height: auto;
  display: block;
}
 
.item-desc {
  padding: 12px;
  font-size: 14px;
  color: #333;
}
 
/* 加載更多樣式 */
.load-more, .no-more {
  width: 100%;
  text-align: center;
  padding: 16px;
  font-size: 14px;
  color: #666;
  cursor: pointer;
}
 
.load-more:hover {
  color: #409eff;
}
 
.no-more {
  cursor: default;
  color: #999;
}
</style>

npm install vue3-waterfall-easy --save