Filter 와 Sort 기능을 갖춘 반응형 레이아웃 js 플러그인 – isotope.js

개요

반응형 홈페이지를 만들기 위한 js 플러그인과 css 프레임워크에는 몇가지가 있습니다.

css 프레임워크중에서는 대표적으로 bootstrap 이 있고, js 로는 지금 소개해드리는 isotope 가 많이 쓰이고 있는데 이 isotope 는 한마디로 목록형태의 레이아웃을 화면 크기에 상관없이 일정한 형태로 표시하기 위한 플러그인이라고 볼 수 있습니다.

간단히 사용법을 살펴보겠습니다.

Isotope

위의 홈페이지에 보면 어떤 효과들을 지원하는지 알 수 있습니다.

참고로 밑의 예제에 사용할 레이아웃은 item (목록 형태 안의 각각의 요소, 이하 item) 의 안에 이미지가 들어가있는 형태라 (핀터레스트 혹은 갤러리를 생각하시면 됩니다.) imagesloaded 라는 js 플러그인을 추가로 로드해야 합니다. (이 플러그인을 사용하지 않으면 item 안에 들어가있는 image 의 크기를 따로 계산하지 않기때문에 겹쳐 보이게 됩니다.)

1.isotope.js 파일 load

참고로 저는 따로 로컬에 업로드하지 않고 http://cdnjs.com/ (cloudflare CDN) 의 파일을 연결했습니다.

추가로 imagesloaded.js 파일도 로드합니다.

wp_enqueue_script( 'isotope', '//cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.0.0/isotope.pkgd.min.js', array('jquery'), null);
wp_enqueue_script( 'imagesloaded', '//cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.0.4/jquery.imagesloaded.min.js', array('jquery','isotope'), null);

1 2	wp_enqueue_script( 'isotope', '//cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.0.0/isotope.pkgd.min.js', array('jquery'), null); wp_enqueue_script( 'imagesloaded', '//cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.0.4/jquery.imagesloaded.min.js', array('jquery','isotope'), null);

2.isotope.js 실행

jQuery(document).ready(function($){
	var option = {
		itemSelector: '.box',
		masonry: {
			columnWidth: 232,
			gutter: 27
		}
	};
	var $container = $('#masonry').imagesLoaded( function() {
		$container.isotope(option);
	});
});

jQuery(document).ready(function($){

var option = {

itemSelector: '.box',

masonry: {

columnWidth: 232,

gutter: 27

}

};

var $container = $('#masonry').imagesLoaded( function() {

$container.isotope(option);

});

다양한 옵션을 지원하는데 위의 예제는 가장 기본적인 옵션만 지정해 보겠습니다.

itemSelector : 목록 형태의 각 요소들의 selector
masonry : 레이아웃 형태중 하나이며 핀터레스트를 생각하시면 되겠습니다. 참고로 레이아웃에는 여러 종류가 있습니다.
columnWidth : item 의 넓이값 (픽셀, 각 레이아웃마다 옵션이 틀리므로 주의)
gutter : item 간의 간격 (픽셀, 각 레이아웃마다 옵션이 틀리므로 주의)

item 안에 이미지가 들어가므로 이미지의 넓이, 높이값을 isotope 의 레이아웃에 반영하기 위해 imagesLoaded 와 함께 로드합니다.

html 은 아래와 같은 형태가 되겠죠.

<div id="masonry">
	<div class=".box">
		<img src="..">
		<span class="title"></span>
	</div>
	<div class=".box">
		<img src="..">
		<span class="title"></span>
	</div>
	<div class=".box">
		<img src="..">
		<span class="title"></span>
	</div>
</div>

</div>

</div>

</div>

참고 : 무한 스크롤 자동 로딩

순서 1의 코드들의 밑에 들어가야 합니다.

jQuery(".faqpaging > a").on("click", function(){
	var next_page_number = parseInt(current_page_number) + 1;
	var category = jQuery("ul.tab_submenu2").children('li').filter('.on').children("a").attr("class").replace(/category-/g,"");
	jQuery.ajax({
		type: "POST",
		url:'/wp-admin/admin-ajax.php', 
		data:{
		    	'action':'project_gallery',
		    	'page':next_page_number,
		    	'category':category
		},
		success:function(data){
		    	var item_size = jQuery(data+" div.item").length;
		    	if(item_size<11){
		    		jQuery(".faqpaging").children("a").remove();
		    		jQuery(".faqpaging").append("<span>더이상 목록이 존재하지 않습니다.</span>");
		    	}
			$('#masonry').imagesLoaded( function() {
				$container.isotope(option);
			});
		    	$container.append( data ).isotope( 'appended', data).isotope('reloadItems');
		}
});

jQuery(".faqpaging > a").on("click", function(){

var next_page_number = parseInt(current_page_number) + 1;

var category = jQuery("ul.tab_submenu2").children('li').filter('.on').children("a").attr("class").replace(/category-/g,"");

jQuery.ajax({

type: "POST",

url:'/wp-admin/admin-ajax.php',

data:{

'action':'project_gallery',

'page':next_page_number,

'category':category

success:function(data){

var item_size = jQuery(data+" div.item").length;

if(item_size<11){

jQuery(".faqpaging").children("a").remove();

jQuery(".faqpaging").append("<span>더이상 목록이 존재하지 않습니다.</span>");

}

$('#masonry').imagesLoaded( function() {

$container.isotope(option);

});

$container.append( data ).isotope( 'appended', data).isotope('reloadItems');

}

});

위의 예제는 버튼 버전입니다.

ajax 부분은 따로 구현하면 되고 버튼을 누르면 다음 페이지의 item 들이 appended 되는 형태입니다.

원래 예제에서는 위처럼 나와있지는 않은데, 코드를 수정하며 몇번을 해보니 목록을 추가할때 위처럼 또 다시한번 isotope 를 실행하지 않으면 레이아웃이 제대로 표시되지 않았습니다.

만약 스크롤시 다음 페이지를 표시하고 싶다면 아래의 코드를 사용해야 합니다.

jQuery(window).scroll(function(){
	//높이값은 적당히 조절
	if(jQuery(window).scrollTop()==jQuery(document).height()-jQuery(window).height()){
		//페이징 링크 버튼이 있을경우(다음 목록이 존재할 경우)만 실행
		if(jQuery(".faqpaging > a").length){
			//아래의 코드 혹은 위의 jQuery(".faqpaging > a").on("click", function(){ 코드 안의 코드를 대체
			jQuery(".faqpaging > a").click();
		}
	}
});

jQuery(window).scroll(function(){

//높이값은 적당히 조절

if(jQuery(window).scrollTop()==jQuery(document).height()-jQuery(window).height()){

//페이징 링크 버튼이 있을경우(다음 목록이 존재할 경우)만 실행

if(jQuery(".faqpaging > a").length){

//아래의 코드 혹은 위의 jQuery(".faqpaging > a").on("click", function(){ 코드 안의 코드를 대체

jQuery(".faqpaging > a").click();

}

});

이상으로 망형태(griD) 레이아웃 + 반응형일때 유용하게 사용할 수 있는 isotope 에 대해 살펴봤습니다.

이 isotope.js 개발자가 만든 비슷한 형태의 js 플러그인이 몇가지 더 있는데요.

망 형태의 레이아웃 + 반응형으로 레이아웃은 모두 동일하지만 각각 사용 목적이 틀립니다.

Masonry : 가장 기본적인 형태, sort 및 filter 가 없음
Isotope : 위의 Masonry 에서 sort 와 filter 가 추가된 형태
Packery : 1번의 Masonry 에서 click 이벤트 및 drag 이벤트가 추가된 형태

일반적으로 Masonry 가 가장 무난하긴 한데, sort 나 filter같은 기능은 꽤 유용하기 때문에 Isotope역시 많이 사용하는듯 합니다. 최근 나온 wordpress 테마들에는 거의 기본처럼 들어가있는듯 합니다.

이 isotope.js 개발자분은 꽤 유명한 분으로 isotope 이외에도 여러가지 유용한 플러그인을 개발했으며 개발중에 있으니 한번쯤 방문해서 둘러보면 꽤 도움이 될겁니다.

isotope 공식 페이지
isotope Githup 페이지
개발자 홈페이지 (브라우저를 크롬이나 파이어 폭스를 사용중이라면 클릭한채로 마우스를 움직여 보세요.)

개요

Isotope

1.isotope.js 파일 load

2.isotope.js 실행

참고 : 무한 스크롤 자동 로딩

댓글 남기기