모바일 갤러리: 높이 기반 균등 분배 알고리즘 적용

This commit is contained in:
caadiq 2026-01-12 16:08:00 +09:00
parent b06e9c0ad9
commit 443bd203ca

View file

@ -109,16 +109,24 @@ function MobileAlbumGallery() {
return () => { document.body.style.overflow = ''; }; return () => { document.body.style.overflow = ''; };
}, [selectedIndex]); }, [selectedIndex]);
// 2 // 2 ( )
const distributePhotos = () => { const distributePhotos = () => {
const leftColumn = []; const leftColumn = [];
const rightColumn = []; const rightColumn = [];
let leftHeight = 0;
let rightHeight = 0;
photos.forEach((photo, index) => { photos.forEach((photo, index) => {
if (index % 2 === 0) { // (width height/width )
const aspectRatio = photo.height && photo.width ? photo.height / photo.width : 1;
//
if (leftHeight <= rightHeight) {
leftColumn.push({ ...photo, originalIndex: index }); leftColumn.push({ ...photo, originalIndex: index });
leftHeight += aspectRatio;
} else { } else {
rightColumn.push({ ...photo, originalIndex: index }); rightColumn.push({ ...photo, originalIndex: index });
rightHeight += aspectRatio;
} }
}); });
@ -208,10 +216,6 @@ function MobileAlbumGallery() {
/> />
</motion.div> </motion.div>
))} ))}
{/* 홀수개일 때 오른쪽 열 하단에 빈 공간 방지용 플레이스홀더 */}
{photos.length % 2 === 1 && (
<div className="flex-1" />
)}
</div> </div>
</div> </div>
</div> </div>