[javascript] Isotope을 사용하여 웹 페이지의 요소들을 색으로 필터링하는 방법은 무엇인가요?

01 Dec 2023

javascript

Isotope 라이브러리를 다운로드하고 웹 페이지에 추가합니다.
HTML 마크업에서 필터링 할 요소들을 감싸는 컨테이너를 만듭니다.

<div class="grid">
  <div class="item red"></div>
  <div class="item blue"></div>
  <div class="item green"></div>
  ...
</div>

필터링할 때 기준이 될 버튼들을 만듭니다.

<button class="filter-button" data-filter=".red">Red</button>
<button class="filter-button" data-filter=".blue">Blue</button>
<button class="filter-button" data-filter=".green">Green</button>
...

JavaScript에서 Isotope을 초기화하고 필터링 기능을 작성합니다.

// Isotope 초기화
$('.grid').isotope({
  itemSelector: '.item',
  layoutMode: 'fitRows'
});

// 필터링 버튼 클릭 시 실행되는 함수
$('.filter-button').on('click', function() {
  var filterValue = $(this).attr('data-filter');
  $('.grid').isotope({ filter: filterValue });
});

위의 코드는 Isotope을 사용하여 웹 페이지의 요소들을 색으로 필터링하는 기본적인 방법입니다. Isotope은 다양한 필터링 및 정렬 옵션을 제공하므로 필요에 맞게 활용할 수 있습니다.

참고 문서: