왜 필요한가

여행 앨범에서 친구는 가로·세로 사진과 기억을 봅니다. 같은 높이의 행은 큰 틈을 남기거나 세로 항구 사진을 자릅니다. 같은 정보 항목 정렬보다 각 사진의 비율이 중요합니다.

어떻게 해결하는가

사진의 원래 비율을 두고 카드를 가장 짧은 열에 놓습니다. 기억을 펼치면 뒤 카드가 겹치지 않게 이동합니다. DOM·키보드 순서는 유지합니다. 좁은 화면은 한 열, 초기화는 메모 접기입니다.

자르지 않은 여행 사진과 기억 펼치기
여행 기록

잠시 머문 곳

가로로 넓은 물가와 세로로 긴 항구, 각 기억의 자리.

아침 물가
01

아침 물가

기억 읽기

모래언덕 길 옆으로 낮은 파도가 밀려옵니다. 넓은 수평선을 자르지 않고 보여줍니다.

해 질 무렵 항구
02

해 질 무렵 항구

기억 읽기

세로 구도는 앞쪽 배에서 물 위 마지막 빛까지 이어집니다.

호수로 돌아가기
03

호수로 돌아가기

기억 읽기

소나무가 길을 감쌉니다. 물가 전체를 담고 잠깐 쉰 뒤 집으로 향했습니다.

마지막 눈길
04

마지막 눈길

기억 읽기

같은 해변 사진에 더 긴 기억을 붙였습니다. 캡션 길이도 카드 높이에 영향을 줍니다. 이 메모를 열면 뒤의 카드가 겹치지 않게 움직여야 합니다.

본문 안의 가상 데모입니다. 초기화·새로고침으로 처음 상태로 돌아갑니다.

무엇이라 부르는가

메이슨리는 공통 행을 요구하지 않고 높이가 다른 항목을 채웁니다. 시각적 탐색에 적합하며 엄격한 순서 비교에 항상 맞지는 않습니다. 사진·글꼴·펼침의 크기가 바뀌면 재계산합니다.

Masonry: Layout