모바일 갤러리: 높이 기반 균등 분배 알고리즘 적용
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 = ''; };
|
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>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue