모바일 갤러리: 높이 기반 균등 분배 알고리즘 적용
This commit is contained in:
parent
b06e9c0ad9
commit
443bd203ca
1 changed files with 10 additions and 6 deletions
|
|
@ -109,16 +109,24 @@ function MobileAlbumGallery() {
|
|||
return () => { document.body.style.overflow = ''; };
|
||||
}, [selectedIndex]);
|
||||
|
||||
// 사진을 2열 지그재그로 분배
|
||||
// 사진을 2열로 균등 분배 (높이 기반)
|
||||
const distributePhotos = () => {
|
||||
const leftColumn = [];
|
||||
const rightColumn = [];
|
||||
let leftHeight = 0;
|
||||
let rightHeight = 0;
|
||||
|
||||
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 });
|
||||
leftHeight += aspectRatio;
|
||||
} else {
|
||||
rightColumn.push({ ...photo, originalIndex: index });
|
||||
rightHeight += aspectRatio;
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -208,10 +216,6 @@ function MobileAlbumGallery() {
|
|||
/>
|
||||
</motion.div>
|
||||
))}
|
||||
{/* 홀수개일 때 오른쪽 열 하단에 빈 공간 방지용 플레이스홀더 */}
|
||||
{photos.length % 2 === 1 && (
|
||||
<div className="flex-1" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue