먼저, 필터링할 요소들을 포함하는 컨테이너를 HTML 문서에 만들어야 합니다. 예를 들어, 다음과 같은 형태의 컨테이너를 만들 수 있습니다:

<div id="container">
  <div class="item green">Green</div>
  <div class="item red">Red</div>
  <div class="item blue">Blue</div>
</div>

위 예제에서는 컨테이너 내에 세 개의 요소를 정의하고 각각의 요소에는 색상과 관련된 클래스를 부여했습니다.

이제 Isotope을 초기화하고 필터링을 위한 옵션을 설정해야 합니다. 다음 코드를 사용하여 Isotope을 초기화할 수 있습니다:

var container = document.getElementById('container');
var iso = new Isotope( container, {
  itemSelector: '.item',
  layoutMode: 'masonry'
});

위 코드에서는 Isotope을 container를 기반으로 초기화하고, itemSelector로 각각의 요소를 선택하도록 지정합니다. layoutMode는 Isotope에서 사용할 레이아웃 모드를 설정하는 옵션입니다. 위 예제에서는 masonry 레이아웃을 사용하도록 설정했습니다.

이제 필터링 옵션을 추가해 보겠습니다. 필터링 옵션을 추가하기 위해 사용자가 클릭하는 버튼을 만들고, 버튼을 클릭할 때마다 필터링 로직을 실행하는 이벤트 핸들러를 작성합니다. 예를 들어, 다음과 같은 버튼을 만들 수 있습니다:

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

위 예제에서는 세 개의 버튼을 만들었고, 각각의 버튼에 filter-button 클래스와 필터링할 요소를 지정하는 data-filter 속성을 추가했습니다.

이제 JavaScript 코드를 사용하여 필터링 기능을 구현할 수 있습니다. 다음 코드를 사용하여 버튼 클릭 이벤트 핸들러를 작성합니다:

var filterButtons = document.getElementsByClassName('filter-button');

for (var i = 0; i < filterButtons.length; i++) {
  filterButtons[i].addEventListener('click', function(e) {
    var filterValue = e.target.getAttribute('data-filter');
    iso.arrange({ filter: filterValue });
  });
}

위 코드에서는 필터링 버튼을 가져와서 각각의 버튼에 클릭 이벤트 핸들러를 추가합니다. 클릭 이벤트 핸들러에서는 클릭한 버튼의 data-filter 값을 가져와서 해당 값으로 요소를 필터링합니다.

이제 페이지를 로드하고 필터링 버튼을 클릭해 보면, Isotope을 사용하여 요소를 필터링할 수 있습니다. 선택한 필터에 따라 그리드 레이아웃이 재정렬되고 필터링된 요소들만 표시됩니다.

자세한 내용은 Isotope 문서를 참조하시기 바랍니다.