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

2026-04-04 21:11:30 +08:00
parent eca7e91c9e
commit 02a4ea3f4e
3 changed files with 115 additions and 29 deletions
--- a/web/src/lib/components/photo/PhotoCard.svelte
+++ b/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">
@@ -49,7 +57,7 @@
 			/>
 		{/if}
 	</div>
-		<p class="photo-name" class:photo-name-hide={borderLess}>{photo.fileName}</p>
+	<p class="photo-name" class:photo-name-hide={borderLess}>{photo.fileName}</p>
 </a>

 <style>
@@ -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;
@@ -67,14 +86,20 @@
        overflow: hidden;
        margin-bottom: var(--space-sm);
        box-shadow: var(--shadow-sm);
-				transition: border-radius 0.25s ease-out, margin-bottom 0.25s ease-out;
+		transition: border-radius 0.25s ease-out, margin-bottom 0.25s ease-out;
    }

-		.photo-borderless {
-				border-radius: 0;
-				margin-bottom: 0;
-				box-shadow: none;
-		}
+	.photo-borderless {
+		border-radius: 0;
+		margin-bottom: 0;
+		box-shadow: none;
+	}
+
+	/* 瀑布流模式：保持原始宽高比 */
+	.photo-waterfall {
+		aspect-ratio: auto;
+		height: auto;
+	}

    .photo-wrapper img {
        width: 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);
@@ -122,9 +160,9 @@
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: 0 var(--space-xs);
-				transition: visibility var(--transition-slow) cubic-bezier(0.4, 0, 0.2, 1);
+		transition: visibility var(--transition-slow) cubic-bezier(0.4, 0, 0.2, 1);
    }
-		.photo-name-hide {
-				display: none;
-		}
+	.photo-name-hide {
+		display: none;
+	}
 </style>
--- a/web/src/lib/components/photo/PhotoGrid.svelte
+++ b/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;
--- a/web/src/routes/album/[id]/+page.svelte
+++ b/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>
-			<SegmentedControl
-				value={viewMode}
-				onchange={(v) => viewMode = v}
-				options={viewOptions}
-				size="small"
-			/>
+			<div class="controls">
+				<SegmentedControl
+					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>