From 8386dc09aa609e80f47bbe64295411eb12bb93d7 Mon Sep 17 00:00:00 2001
From: lzw-723 <lzw-723@qq.com>
Date: Sat, 4 Apr 2026 22:04:25 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=89=8D=E7=AB=AF=E7=80=91?=
 =?UTF-8?q?=E5=B8=83=E6=B5=81=E7=85=A7=E7=89=87=E9=A1=BA=E5=BA=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/lib/components/photo/PhotoGrid.svelte | 117 ++++++++++++++----
 1 file changed, 95 insertions(+), 22 deletions(-)

diff --git a/web/src/lib/components/photo/PhotoGrid.svelte b/web/src/lib/components/photo/PhotoGrid.svelte
index 5b3c181..0b182e3 100644
--- a/web/src/lib/components/photo/PhotoGrid.svelte
+++ b/web/src/lib/components/photo/PhotoGrid.svelte
@@ -1,4 +1,5 @@
 <script>
+	import { browser } from '$app/environment';
 	import PhotoCard from './PhotoCard.svelte';
 	import { Empty, Loading } from '$lib/components/ui';
 	import { m } from '$lib/paraglide/messages';
@@ -34,18 +35,83 @@
 	function getVisiblePhotos() {
 		return photos.slice(0, displayedCount);
 	}
+
+	// 响应式列数（默认 3）
+	let columnCount = $state(3);
+
+	function getColumnCount() {
+		if (!browser) return 3;
+		const w = window.innerWidth;
+		if (w < 768) return 2;
+		if (w >= 1200) return 4;
+		return 3;
+	}
+
+	// 初始化 + 响应式更新
+	$effect(() => {
+		if (!browser) return;
+		columnCount = getColumnCount();
+
+		let timer;
+		const onResize = () => {
+			clearTimeout(timer);
+			timer = setTimeout(() => {
+				columnCount = getColumnCount();
+			}, 150);
+		};
+		window.addEventListener('resize', onResize);
+		return () => {
+			clearTimeout(timer);
+			window.removeEventListener('resize', onResize);
+		};
+	});
+
+	// 瀑布流分列：贪心平衡算法
+	// 每次把下一张放到当前最短的列，自动平衡各列总高度
+	function splitToColumns(items, colCount) {
+		const columns = Array.from({ length: colCount }, () => []);
+		const heights = new Array(colCount).fill(0);
+
+		for (const item of items) {
+			// 相对高度 = 高/宽，列宽相同所以可直接比
+			let h = item.width && item.height ? item.height / item.width : 0.75;
+
+			// 找到最短列
+			let minIdx = 0;
+			for (let i = 1; i < colCount; i++) {
+				if (heights[i] < heights[minIdx]) minIdx = i;
+			}
+
+			columns[minIdx].push(item);
+			heights[minIdx] += h;
+		}
+
+		return columns;
+	}
 </script>
 
 {#if photos.length === 0 && !hasMore}
 	<Empty message={m.no_photos()} icon="📷" />
 {:else}
 	<div class="photo-scroll-container" bind:this={scrollContainer}>
-		{#key waterfall + '_' + borderLess}
-			<div class="photo-grid" class:photo-grid-borderless={borderLess} class:photo-grid-waterfall={waterfall}>
-				{#each getVisiblePhotos() as photo, i (photo.id)}
-					<PhotoCard {photo} {onUpgradeQuality} {borderLess} {waterfall} index={i} />
-				{/each}
-			</div>
+		{#key waterfall + '_' + borderLess + '_' + columnCount}
+			{#if waterfall}
+				<div class="photo-grid-waterfall" class:photo-grid-borderless={borderLess}>
+					{#each splitToColumns(getVisiblePhotos(), columnCount) as col}
+						<div class="waterfall-column">
+							{#each col as photo (photo.id)}
+								<PhotoCard {photo} {onUpgradeQuality} {borderLess} {waterfall} />
+							{/each}
+						</div>
+					{/each}
+				</div>
+			{:else}
+				<div class="photo-grid" class:photo-grid-borderless={borderLess}>
+					{#each getVisiblePhotos() as photo, i (photo.id)}
+						<PhotoCard {photo} {onUpgradeQuality} {borderLess} {waterfall} index={i} />
+					{/each}
+				</div>
+			{/if}
 		{/key}
 
 		{#if isLoading}
@@ -103,22 +169,35 @@
         gap: 0;
     }
 
-    /* 瀑布流布局 */
+    /* 瀑布流布局：Flex 列分栏 */
     .photo-grid-waterfall {
-        display: block;
-        column-count: 3;
-        column-gap: var(--space-md);
+        display: flex;
+        gap: var(--space-md);
+        padding-bottom: var(--space-xl);
     }
 
-    /* 瀑布流 + 紧凑：无间距 */
     .photo-grid-waterfall.photo-grid-borderless {
-        column-gap: 0;
+        gap: 0;
     }
 
-    @media (max-width: 768px) {
-        .photo-grid-waterfall {
-            column-count: 2;
-        }
+    .waterfall-column {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        min-width: 0;
+    }
+
+    .photo-grid-waterfall .waterfall-column > :global(.photo-card) {
+        break-inside: avoid;
+        margin-bottom: var(--space-md);
+    }
+
+    .photo-grid-waterfall .waterfall-column > :global(.photo-card):last-child {
+        margin-bottom: 0;
+    }
+
+    .photo-grid-waterfall.photo-grid-borderless .waterfall-column > :global(.photo-card) {
+        margin-bottom: 0;
     }
 
     @media (min-width: 768px) {
@@ -127,12 +206,6 @@
         }
     }
 
-    @media (min-width: 1200px) {
-        .photo-grid-waterfall {
-            column-count: 4;
-        }
-    }
-
     .load-more-trigger,
     .loading-trigger {
         text-align: center;