1. 먼저, Isotope 라이브러리를 웹 페이지에 추가해야 합니다. 이를 위해 <script> 태그를 사용하여 Isotope 라이브러리 파일을 로드합니다. 일반적으로는 CDN을 통해 파일을 가져올 수 있습니다.

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

1. 문서 목록의 HTML 구조를 준비합니다. 일반적으로 <div> 요소로 각각의 문서를 포함하는 컨테이너를 만듭니다. 각 문서는 CSS 클래스로 구분되어야 하며, 이 클래스를 기반으로 Isotope이 정렬을 수행합니다.

<div class="grid">
  <div class="item">문서 1</div>
  <div class="item">문서 2</div>
  <div class="item">문서 3</div>
  <!-- 추가 문서 -->
</div>

1. JavaScript 코드에서 Isotope을 초기화하고 문서 목록을 정렬합니다. Isotope은 new Isotope() 생성자 함수를 사용하여 초기화할 수 있습니다. 정렬 기준으로 사용할 요소(selector)와 정렬 옵션을 파라미터로 지정합니다.

var grid = document.querySelector('.grid');
var isotope = new Isotope(grid, {
  itemSelector: '.item',
  layoutMode: 'fitRows' // 레이아웃 모드 설정, 다른 옵션도 사용 가능
});

1. 필요에 따라 이벤트나 버튼을 추가하여 동적으로 정렬 기능을 제공할 수 있습니다. 예를 들어 버튼을 클릭할 때마다 정렬 기준을 변경하거나, 검색어를 입력한 후에 일치하는 문서만 보여질 수 있도록 할 수 있습니다.

// 버튼 클릭 시 정렬 기준 변경
document.querySelector('.button').addEventListener('click', function() {
  isotope.arrange({ sortBy: 'name' });
});

// 검색어 입력 시 일치하는 문서만 보여주기
document.querySelector('.search-input').addEventListener('input', function(event) {
  var searchKeyword = event.target.value;
  isotope.arrange({
    filter: function(item) {
      return item.textContent.includes(searchKeyword);
    }
  });
});

Isotope을 사용하여 웹 페이지의 문서 목록을 동적으로 정렬하는 방법은 위와 같습니다. 자세한 내용은 Isotope 공식 문서를 참고하시기 바랍니다.