먼저, Isotope에 필터링할 항목을 라벨링해야합니다. 이를 위해 HTML 요소에 data-label 속성을 사용할 수 있습니다. 다음은 예시입니다:

<div class="item" data-label="nature"></div>
<div class="item" data-label="food"></div>
<div class="item" data-label="nature"></div>
<div class="item" data-label="design"></div>

다음으로, Isotope 인스턴스를 생성하고 필터링할 라벨 버튼을 만들어야합니다. 이 버튼은 사용자가 특정 라벨을 선택할 때 해당 항목들만 필터링될 수 있도록 해줍니다. 다음은 Isotope 사용 예시입니다:

// 필터링할 라벨 버튼 생성
const filterButtons = document.querySelectorAll('.filter-button');
filterButtons.forEach(button => {
  button.addEventListener('click', () => {
    const label = button.getAttribute('data-label');
    if (label === 'all') {
      // 모든 항목을 표시
      iso.arrange({ filter: '*' });
    } else {
      // 해당 라벨에 해당하는 항목만 표시
      iso.arrange({ filter: `[data-label="${label}"]` });
    }
  });
});

// Isotope 인스턴스 생성
const grid = document.querySelector('.grid');
const iso = new Isotope(grid, {
  itemSelector: '.item',
  layoutMode: 'fitRows'
});

위의 코드에서는 먼저 필터링할 라벨 버튼을 선택하고 각 버튼에 대한 클릭 이벤트를 추가합니다. 사용자가 버튼을 클릭하면 해당하는 라벨에 따라 항목들이 필터링됩니다. 라벨이 “all”인 경우 모든 항목이 표시되고, 라벨이 다른 경우 해당 라벨에 맞는 항목들만 표시됩니다.

또한, Isotope 인스턴스를 생성하여 그리드 레이아웃을 적용합니다. 위의 코드에서는 .grid 클래스를 가진 요소를 그리드로 사용하며, .item 클래스를 가진 요소들이 각각의 항목입니다.

이제 필터링 시스템이 추가되었으므로 사용자는 라벨 버튼을 클릭하여 원하는 항목들을 필터링할 수 있습니다.이를 통해 웹사이트에 동적이고 유연한 필터링 기능을 추가할 수 있습니다.

더 자세한 내용은 Isotope 공식 문서를 참조해주세요.