isotope.js)필터링 플러그인

# isotope.js ?

masonry 플러그인과 결합해 메뉴탭과 메뉴에 따라 필터링 될 요소들로 구성하여 사용하는 제이쿼리 플러그인

# 사용하기

1-1. js파일 다운로드

https://isotope.metafizzy.co/

Isotope · Filter & sort magical layouts

isotope 홈페이지에서 isotope.pkgd.min.js 파일을 다운로드 한다.

jQuery기반이기 때문에 제이쿼리도 함께 가져와야 한다.

1-2. cdn

cdn으로 가져와 사용해도 된다. 이 또한 공식홈페이지에서 제공하고 있다.

<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script>
<!-- or -->
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>

2. 기본 구성

HTML

<ul>
  <li data-filter="*" class="active" id="menu">전체</li>
  <li data-filter=".sort1">메뉴1</li>
  <li data-filter=".sort2">메뉴2</li>
  <li data-filter=".sort3">메뉴3</li>
  <li data-filter=".sort4">메뉴4</li>
</ul>

<div id="items">
  <ol>
    <li class="item sort1">메뉴1 아이템</li>
    <li class="item sort1">메뉴1 아이템</li>
    <li class="item sort1">메뉴1 아이템</li>
    <li class="item sort2">메뉴2 아이템</li>
    <li class="item sort2">메뉴2 아이템</li>
    <li class="item sort3">메뉴3 아이템</li>
    <li class="item sort3">메뉴3 아이템</li>
    <li class="item sort3">메뉴3 아이템</li>
    <li class="item sort3">메뉴3 아이템</li>
    <li class="item sort4">메뉴4 아이템</li>
  </ol>
</div>

CSS

#menu > li {color: #ccc;}
#menu > li.active {color: #333;}

JS

let $items = $("#items > ol").isotope({
  itemSelector: "#item",  // 필터링 될 아이템의 선택자
  layoutMode: "masonry"  // 레이아웃 옵션
  transitionDuration: "0.5s"  // 필터링 되는 시간
});

$("#menu").on("click", "li", function(){
  let filterValue = $(this).attr('data-filter');
  $items.isotope({filter: filterValue});
  $("#menu > li").removeClass("active");
  $(this).addClass("active");
});

// imageloaded.js
$items.imagesLoaded().progress(function(){
  $items.isotope("layout");
});

 item의 안에 이미지가 있는 경우 imageLoaded.js라는 플러그인을 함께 써야 아이템들이 겹치지 않고 정상적으로 출력된다.

2. 참고 사이트

https://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/

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

https://codepen.io/desandro/pen/DmZrEo

Isotope - filtering & sorting

 

http://v3.desandro.com/

David DeSandro