[Javascript plugin] Masonry Layout 적용하기

메이슨리 레이아웃 ( Masonry Layout )을 이용하면 크기가 다른 컨텐츠를 효율적으로 배치할 수 있다.

빈영역을 최소화할 수 있으며 지겨운 스타일로부터 벗어나 자유로운 느낌을 주기도 한다!

 

핀터레스트가 이러한 레이아웃을 사용하는데, width는 고정하고 height는 설정하지 않은 것으로 보인다. 

 

 

구글링을 해보니 오직 css로만 구현하는 방법도 나오긴 하던데.. 효율충인 나는 더 간편한 자바스크립트 라이브러리를 사용하려한다.

 

https://masonry.desandro.com/

Masonry

 

여기서 다운로드를 받아서 js 폴더 안에 plugin이라는 폴더를 만들고 그 안에 넣었다. 

beautify 를 이용하여 정렬하면 870줄이 나온다.