1. HTML 구조 설정하기

   <div class="news">
     <div class="item">뉴스 아이템 1</div>
     <div class="item">뉴스 아이템 2</div>
     <div class="item">뉴스 아이템 3</div>
     <!-- ... -->
   </div>
   

2. Isotope 라이브러리 가져오기

   <script src="https://cdn.jsdelivr.net/npm/isotope-layout@3.0.6/dist/isotope.pkgd.min.js"></script>
   

3. 스타일과 스크립트 추가하기

   <script>
     // Isotope 라이브러리를 초기화하고 옵션을 설정합니다.
     var iso = new Isotope('.news', {
       // 그리드 내부 아이템의 정렬 방식을 설정합니다.
       itemSelector: '.item',
       layoutMode: 'fitRows'
     });
   
     // 필터 버튼을 클릭했을 때 필터링이 적용되도록 합니다.
     var filters = document.querySelectorAll('.filters button');
     filters.forEach(function(button) {
       button.addEventListener('click', function() {
         var filterValue = this.getAttribute('data-filter');
         iso.arrange({ filter: filterValue });
       });
     });
   </script>
   

4. 필터링 버튼 추가하기

   <div class="filters">
     <button data-filter="*">전체</button>
     <button data-filter=".politics">정치</button>
     <button data-filter=".economy">경제</button>
     <!-- ... -->
   </div>
   

위의 코드는 뉴스 목록을 그리드 형식으로 레이아웃하고 필터링하는 기능을 구현합니다. 필터 버튼을 클릭하면 해당하는 카테고리의 뉴스만 표시됩니다. Isotope 라이브러리의 자세한 사용법은 공식 문서를 참조하시기 바랍니다.