1. Isotope 라이브러리를 웹 페이지에 추가합니다.:

   <script src="path/to/isotope.pkgd.min.js"></script>
   

2. 필터링을 적용할 요소들을 HTML로 구성합니다. 각 요소에는 필터링에 사용될 클래스를 추가합니다. 예를 들어, 카테고리 별로 분류된 요소가 있다면 각 요소에는 해당하는 카테고리의 클래스를 추가합니다. 예를 들어, 카테고리 “사진”에 속하는 요소는 “photo” 클래스를 가지고 있습니다. ```html

…

3. Isotope을 초기화하고 필터링 옵션을 설정합니다. 필터링에 사용할 버튼을 클릭하면 해당 필터가 적용됩니다. 예를 들어, "사진" 버튼을 클릭하면 "photo" 클래스를 가진 요소만 표시됩니다.
```javascript
var $grid = $('.grid').isotope({
  itemSelector: '.item',
  layoutMode: 'masonry'
});

$('.filter-button').on('click', function(){
  var filterValue = $(this).attr('data-filter');
  $grid.isotope({ filter: filterValue });
});

1. 필터링 버튼을 만들고 각 버튼에 해당하는 필터 값을 설정합니다. 예를 들어, “사진” 카테고리에 대한 필터링을 위한 버튼은 다음과 같이 만들 수 있습니다.

   <button class="filter-button" data-filter=".photo">사진</button>
   

이제 Isotope을 사용하여 다양한 필터링 옵션을 설정할 수 있습니다. 웹 페이지에서 필터링을 적용할 요소와 필터링 버튼을 구성하고, 필터링 옵션을 설정하여 원하는 결과를 얻을 수 있습니다.

더 자세한 내용은 Isotope 공식 문서를 참고하시기 바랍니다.

Isotope 공식 문서