Masonry Plugin

http://masonry.desandro.com/

Masonry 플러그인은 동적인 레이아웃을 구성할 때 사용할 수 있는 플러그인입니다.
Masonry 플러그인의 공식 홈페이지는 http://masonry.desandro.com/ 입니다.

Masonry 플러그인은 div 태그 내부에서 div 태그를 여러 개 배치해 사용합니다. Masonry 플러그인이 어떤 식으로 동작하는지 확인하려고 아래 코드 처럼 각각의 div 태그에 클래스를 두 개씩 입력했습니다.

							<div id="masonry_container">
								<div class="item small"></div>
								<div class="item big"></div>
								<div class="item normal"></div>
								<div class="item small"></div>
								<div class="item small"></div>
								<div class="item small"></div>
								<div class="item normal"></div>
								<div class="item normal"></div>
								<div class="item small"></div>
								<div class="item small"></div>
								<div class="item small"></div>
							</div>							
						

Masonry 플러그인을 사용할 때 각 div 태그에는 float속성이 left이나 right로 적용돼 있어야 합니다.
아래 코드 처럼 style 태그를 구성해 주세요. 또한 아래 소스 코드에서 만든 클래스 이름에 맞게 적절한 크기를 설정합니다.

							*{margin:0;padding:0;}
							body{background-color:#525252;}
							.item {margin:5px;width:100px;height:100px;background-color:#fff;border-radius:10px;float:left;}
							.big{width:210px;height:430px;}
							.normal{width:210px;height:210px;}
							.small{width:100px;height:100px;}						
						

Masonry 플러그인의 핵심 메서드는 masonry() 입니다. masonry() 메서드의 옵션 중 itemSelector 옵션 속성과 columnWidth 옵션 속성은 반드시 지정해야 합니다.

							$(function(){
								$("#masonry_container").masonry({
									itemSelector:'.item',
									columnWidth:110,
									isAnimated: true
								});
							});				
						

이 코드에서 columnWidth 옵션 속성에 의문이 들 수 있는데요. "왜 columnWidth 속성을 110으로 설정했나요?"
columnWidth 옵션 속성은 Masonry 플러그인이 사용할 열의 너비를 지정하는 것입니다. 코드를 실행하면 예제 1처럼 특정크기의 열로 분할해 빈틈없이 채우는데요. 스타일 시트에서 small 클래스의 width 속성을 100px로 지정했고, item 클래스의 margin 속성을 5px로 입혁했으므로 하나의 item 요소의 너비가 110px입니다. 그래서 columnWidth 옵션 속성을 110으로 설정했습니다.

이제 Masonry 플러그인을 사용해 CJ 제일제당의 사이트를 모방해 봅시다. 예제2 에, body 태그와 style 태그는 완성돼 있고, 이전과 같으므로 직접 살펴 보세요. 이 파일을 사용해 Masonry 플러그인의 옵션 속성과 메서드를 조금 더 알아봅시다. 예제2의 script 소스는 아래와 같습니다.

							$(function(){
								$("#masonry_container").masonry({
									itemSelector:'.item',
									columnWidth:170,
									isAnimated: true
								});
							});				
						

itemSelector 옵션 속성과 columnWidth 옵션 속성 이외에 isAnimated 옵션 속성을 입력했습니다. isAnimated 옵션 속성은 기본적으로 false로 설정돼 있으며, 화면의 크기가 조절돼 각 요소가 위치를 다시 잡을 때 움직임 효과를 부여할 지, 부여하지 않을 지와 관련된 속성입니다.
실행하고 화면의 크기를 조정하면 예제2처럼 화면의 내용이 위치를 찾으며 이동하는 효과를 볼 수 있습니다.

Masonry 플러그인의 옵션 속성은 상기의 코드에서 살펴본 세 가지를 가장 많이 사용합니다. 추가 옵션 속성은 Masonry 플러그인의 공식 홈페이지를 참고하세요.
이제 Masonry 플러그인의 메서드를 살펴봅시다. Masonry 플러그인의 메서드는 jQuery UI 플러그인과 비슷한 방법으로 사용합니다. 다음과 같이 masonry() 메서드를 사용하고, 첫 번째 매개 변수에 메서드의 이름을 입력하고 이어 추가 매개 변수를 입력합니다.

$(selector).masonry('methodName', [optionalParameters])

Masonry 플러그인에 있는 메서드는 다음과 같습니다. 이름과 함께 공식 홈페이지를 참고하면 모든 메서드를 쉽게 이해할 수 있습니다.

  1. ◈ appended
  2. ◈ destroy
  3. ◈ layout
  4. ◈ option
  5. ◈ reloadItems
  6. ◈ reload
  7. ◈ remove

여기서는 remove 메서드와 reload 메서드를 사용해 봅시다.

							$(document).ready(function () {
								// masonry 플러그인을 적용합니다.
								$('#masonry_container').masonry({
									itemSelector: '.item',
									columnWidth: 170,
									isAnimated: true
								});
								$('#masonry_container').masonry('reload');

								// 이벤트를 연결합니다.
								$('.item').live('click', function () {
									// 클릭한 대상을 제거합니다.
									$('#masonry_container').masonry('remove', $(this));
									$('#masonry_container').masonry('reload');
								});

								$('#add_button').click(function () {
									// 두 배로 복제합니다.
									var $item = $('#masonry_container').children().clone();
									$('#masonry_container').append($item).masonry('reload');
								});
							});				
						

크게 어려운 내용은 없지만 조금 이상하다고 느꼈을 것입니다. "Masonry 플러그인의 appended 메서드를 사용하지 않고 그냥 append() 메서드를 사용했네요?"
네 맞습니다. Masonry 플러그인의 appended 메서드를 사용하지 않아도 쉽게 내용을 추가할 수 있습니다. 어떤 방법을 사용해도 차이는 없으므로 편한 방법을 사용하세요. 코드를 실행하고 지정한 태그를 누르면 자동으로 페이지의 내용물 갯수가 늘어나며 자리를 찾습니다.
jQuery Masonry 플러그인을 사용하면 반응형 웹도 만들 수 있습니다. 반응형 웹이란 화면의 크기에 따라 레이아웃의 형태가 변화해 하나의 웹 페이지를 스마트폰, 태블릿 PC, 테스크톱에 모두 적용할 수 있는 기술입니다. http://naomiatkinson.com/를 참고하세요. Masonry 플러그인을 활용한 반응형 웹이랍니다.