diff --git a/src/pages/gallery.astro b/src/pages/gallery.astro index 868b682..361c717 100644 --- a/src/pages/gallery.astro +++ b/src/pages/gallery.astro @@ -318,12 +318,12 @@ import { Icon } from "astro-icon/components"; if (sentinel) observer.observe(sentinel); } - function createCard(imageData, index) { + function createCard(imageData, index, isInitial = false) { const { url, year, month } = imageData; const div = document.createElement('div'); div.className = 'gallery-item relative rounded-lg overflow-hidden cursor-zoom-in group/img bg-black/5 dark:bg-white/5'; div.dataset.index = index; - + const dateLabel = `${year}年${parseInt(month)}月`; div.innerHTML = ` @@ -332,7 +332,7 @@ import { Icon } from "astro-icon/components"; Gallery Image @@ -342,21 +342,21 @@ import { Icon } from "astro-icon/components"; `; - + const img = div.querySelector('img'); const loadingBar = div.querySelector('.loading-bar'); - + img.onload = function() { this.style.opacity = '1'; loadingBar.style.opacity = '0'; - + // 缓存图片高度用于重建时快速分配 const aspectRatio = this.naturalHeight / this.naturalWidth; loadedImageHeights.set(url, aspectRatio); }; - + div.onclick = () => openLightbox(index); - + return div; } @@ -384,10 +384,11 @@ import { Icon } from "astro-icon/components"; } const end = Math.min(currentIndex + BATCH_SIZE, filteredImages.length); + const isInitialBatch = currentIndex === 0; for (let i = currentIndex; i < end; i++) { const imageData = filteredImages[i]; - const card = createCard(imageData, i); + const card = createCard(imageData, i, isInitialBatch); // 使用高度平衡算法分配到最短的列 const colIndex = getShortestColumn();