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 파일도 로드합니다.

PHP

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 실행

JavaScript

1 2 3 4 5 6 7 8 9 10 11 12

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 은 아래와 같은 형태가 되겠죠.

XHTML

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<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>

 

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

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

JavaScript

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

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 를실행하지 

않으면 레이아웃이 제대로 표시되지 않았습니다.

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

JavaScript

1 2 3 4 5 6 7 8 9 10

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(); } } });

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

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

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

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

일반적으로 Masonry 가 가장 무난하긴 한데, sort 나 filter같은 기능은 꽤 유용하기 때문에 Isotope역시 많이 사용하는듯 합니다.

최근 나온 wordpress 테마들에는 거의 기본처럼 들어가있는듯

합니다.

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

꽤 도움이 될겁니다.

참조 - http://in-web.co.kr/developer-section/filter-%EC%99%80-sort-%EA%B8%B0%EB%8A%A5%EC%9D%84-%EA%B0%96%EC%B6%98-%EB%B0%98%EC%9D%91%ED%98%95-%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%83-js-%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8-isotope-js/