크기가 다른 블럭이 타일형태로 쌓이는 레이아웃(Masonry) 적용하기

이런 형태의 레이아웃을 찾는 것인 맞는가!? 텀블러를 보고 이런 형태로 구현해보고 싶다고 생각했으나, 처음에 이런 레이아웃 형태의 이름을 몰라서 검색하는데 애먹었다. 그래서 텀블러 뜨는 포스트 레이아웃을 구현하는 법을 찾아다니다가 이런 형태를 Masonry(돌쌓기)라고 부른다는 것을 알았다.

구현원리 자체는 간단한다.

가로정렬이 아니라 세로정렬만 해주면 이렇게 높이가 다른 항목들이 차곡차곡 쌓인다. 문제는 위에서부터 최신 내용이 나오고 아래줄로 갈수록 옛날 내용이 나와야 하는데, 단순히 세로 정렬을 하면 왼쪽줄에 가장 최신내용들이 나오게 된다. 이 또한 n으로 나누어서 출력해 주는 방법을 사용하면 해결은 된다.

그러나 또 문제는 항목을 동적으로 추가 할때, 또는 화면 가로 너비가 바뀌어서 정렬이 뒤바뀔때. 구현하기가 은근 까다롭다. 그래서 우린 남이 구현해 놓은 플러그인을 사용한다.

구글에서 Masonry로 검색하면 많은 플러그인들이 나오나, 내가 개인적으로 만족하고 사용하는 플러그인이 있어서 추천하고 포스팅을 마무리하겠다. 이 플러그인은 AngularJS의 Grid와 조합해서 쓰도록 만들어진 플러그인이다.

http://ignitersworld.com/lab/angulargrid/

실제로 이 플러그인을 적용하여 구현된 화면은

http://부동산계산기.com/forum.php

에서 확인할 수 있다. 브라우저 크기를 바꿔보고 글도 써 보면 어떤식으로 동작되는지 쉽게 이해 될 것이다.

(글은 꼭 부동산 관련 글로 써야 한다... 부동산 사이트이므로)