前端照片列表实现瀑布流模式

web/src/lib/components/photo/PhotoCard.svelte

@@ -5,15 +5,23 @@
 	 * @typedef {Object} PhotoCardProps
 	 * @property {import('$lib/api/types').Photo} photo
 	 * @property {(photoId: number, previewSrc: string) => void} [onUpgradeQuality]
-	 * @property {boolean} borderLess
+	 * @property {boolean} [borderLess]
+	 * @property {boolean} [waterfall]
 	 */
 
 	/** @type {PhotoCardProps} */
-	let { photo, onUpgradeQuality, borderLess } = $props();
+	let { photo, onUpgradeQuality, borderLess = false, waterfall = false } = $props();
 
 	// 使用 $derived 确保响应式更新
 	let previewSrc = $derived(`/api/v1/photo/${photo.id}/preview`);
 
+	// 根据原始宽高比计算瀑布流显示比例，防止图片加载前容器塌陷
+	let aspectRatioStyle = $derived(
+		waterfall && photo.width && photo.height
+			? `aspect-ratio: ${photo.width} / ${photo.height};`
+			: ''
+	);
+
 	function handleMouseEnter() {
 		if (onUpgradeQuality) {
 			onUpgradeQuality(photo.id, previewSrc);
@@ -27,8 +35,8 @@
 	}
 </script>
 
-<a href={resolve(`/photo/${photo.id}`)} class="photo-card">
-	<div class="photo-wrapper" class:photo-borderless={borderLess}>
+<a href={resolve(`/photo/${photo.id}`)} class="photo-card" class:photo-card-waterfall={waterfall} class:photo-card-compact-waterfall={borderLess && waterfall}>
+	<div class="photo-wrapper" class:photo-borderless={borderLess} class:photo-waterfall={waterfall} style={aspectRatioStyle}>
 		{#if photo.mimeType?.startsWith('video/')}
 			<div class="video-indicator">🎬</div>
 			<div class="photo-placeholder">
@@ -59,6 +67,17 @@
         color: inherit;
     }
 
+	/* 瀑布流模式：防止卡片被列截断，并添加间距 */
+	.photo-card-waterfall {
+		break-inside: avoid;
+		margin-bottom: var(--space-md);
+	}
+
+	/* 瀑布流 + 紧凑：无间距 */
+	.photo-card-compact-waterfall {
+		margin-bottom: 0;
+	}
+
     .photo-wrapper {
         position: relative;
         aspect-ratio: 1;
@@ -76,6 +95,12 @@
 		box-shadow: none;
 	}
 
+	/* 瀑布流模式：保持原始宽高比 */
+	.photo-waterfall {
+		aspect-ratio: auto;
+		height: auto;
+	}
+
     .photo-wrapper img {
         width: 100%;
         height: 100%;
@@ -84,6 +109,13 @@
         background: var(--color-border);
     }
 
+	/* 瀑布流模式下图片高度自适应 */
+	.photo-waterfall img {
+		display: block;
+		width: 100%;
+		height: auto;
+	}
+
     .photo-card:hover .photo-wrapper img {
         transform: scale(1.08);
     }
@@ -101,6 +133,12 @@
         word-break: break-word;
     }
 
+	/* 瀑布流模式下 placeholder 默认 4:3 */
+	.photo-waterfall .photo-placeholder {
+		aspect-ratio: 4/3;
+		height: 0;
+	}
+
     .video-indicator {
         position: absolute;
         top: var(--space-sm);

web/src/lib/components/photo/PhotoGrid.svelte

@@ -13,7 +13,8 @@
 	 * @property {(photoId: number, previewSrc: string) => void} [onUpgradeQuality]
 	 * @property {HTMLDivElement | null} [scrollContainer]
 	 * @property {HTMLDivElement | null} [loadMoreTrigger]
-	 * @property {boolean} borderLess
+	 * @property {boolean} [borderLess]
+	 * @property {boolean} [waterfall]
 	 */
 
 	/** @type {PhotoGridProps} */
@@ -26,7 +27,8 @@
 		onUpgradeQuality,
 		scrollContainer = $bindable(null),
 		loadMoreTrigger = $bindable(null),
-		borderLess
+		borderLess = false,
+		waterfall = false
 	} = $props();
 
 	function getVisiblePhotos() {
@@ -38,9 +40,9 @@
 	<Empty message={m.no_photos()} icon="📷" />
 {:else}
 	<div class="photo-scroll-container" bind:this={scrollContainer}>
-		<div class="photo-grid" class:photo-grid-borderless={borderLess}>
+		<div class="photo-grid" class:photo-grid-borderless={borderLess} class:photo-grid-waterfall={waterfall}>
 			{#each getVisiblePhotos() as photo (photo.id)}
-				<PhotoCard {photo} {onUpgradeQuality} {borderLess} />
+				<PhotoCard {photo} {onUpgradeQuality} {borderLess} {waterfall} />
 			{/each}
 		</div>
 
@@ -99,12 +101,36 @@
         gap: 0;
     }
 
+    /* 瀑布流布局 */
+    .photo-grid-waterfall {
+        display: block;
+        column-count: 3;
+        column-gap: var(--space-md);
+    }
+
+    /* 瀑布流 + 紧凑：无间距 */
+    .photo-grid-waterfall.photo-grid-borderless {
+        column-gap: 0;
+    }
+
+    @media (max-width: 768px) {
+        .photo-grid-waterfall {
+            column-count: 2;
+        }
+    }
+
     @media (min-width: 768px) {
         .photo-grid {
             grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
         }
     }
 
+    @media (min-width: 1200px) {
+        .photo-grid-waterfall {
+            column-count: 4;
+        }
+    }
+
     .load-more-trigger,
     .loading-trigger {
         text-align: center;

web/src/routes/album/[id]/+page.svelte

@@ -37,13 +37,21 @@
 	// 已升级质量的图片 ID 集合，避免重复升级
 	let upgradedPhotoIds = new SvelteSet();
 
-	let viewMode = $state('card');
+	// 风格模式：卡片 / 紧凑（控制间距、圆角、阴影）
+	let styleMode = $state('card');
+	// 布局模式：砖块 / 瀑布（Grid / Columns）
+	let layoutMode = $state('grid');
 
-	const viewOptions = [
+	const styleOptions = [
 		{ value: 'card', label: '卡片', icon: '🖼️' },
 		{ value: 'borderless', label: '紧凑', icon: '📐' }
 	];
 
+	const layoutOptions = [
+		{ value: 'grid', label: '砖块', icon: '🧱' },
+		{ value: 'waterfall', label: '瀑布', icon: '🌊' }
+	];
+
 	// 监听数据变化，重置状态
 	$effect(() => {
 		if (data.photos) {
@@ -158,12 +166,20 @@
 	{#if album && allPhotos.length > 0}
 		<div class="subtitle-bar">
 			<span class="photo-count">{photo_count({ count: data.totalPhotos || allPhotos.length })}</span>
+			<div class="controls">
 				<SegmentedControl
-				value={viewMode}
-				onchange={(v) => viewMode = v}
-				options={viewOptions}
+					value={styleMode}
+					onchange={(v) => styleMode = v}
+					options={styleOptions}
 					size="small"
 				/>
+				<SegmentedControl
+					value={layoutMode}
+					onchange={(v) => layoutMode = v}
+					options={layoutOptions}
+					size="small"
+				/>
+			</div>
 		</div>
 	{/if}
 
@@ -179,7 +195,8 @@
 			onUpgradeQuality={upgradePhotoQuality}
 			bind:scrollContainer
 			bind:loadMoreTrigger
-			borderLess={viewMode === 'borderless'}
+			borderLess={styleMode === 'borderless'}
+			waterfall={layoutMode === 'waterfall'}
 		/>
 	{/if}
 </Container>
@@ -196,4 +213,9 @@
 		font-size: var(--font-size-base);
 		color: var(--color-text-secondary);
 	}
+
+	.controls {
+		display: flex;
+		gap: var(--space-sm);
+	}
 </style>