먼저, Isotope을 프로젝트에 추가해야 합니다. 다음과 같이 <script> 태그를 이용하여 Isotope 라이브러리를 가져올 수 있습니다.

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

Isotope을 사용하기 위해, 정렬할 요소들을 가지고 있는 컨테이너를 만들어야 합니다. 컨테이너는 일반적으로 <div> 태그로 만들며, 아이템들이 배치될 공간을 제공합니다.

<div class="grid">
  <!-- 아이템들을 이곳에 추가하면 됩니다. -->
</div>

다음으로, Isotope을 초기화하고 정렬할 요소들을 설정해야 합니다. 아래의 JavaScript 코드를 사용하여 Isotope 객체를 초기화할 수 있습니다.

var grid = document.querySelector('.grid');
var iso = new Isotope(grid, {
  itemSelector: '.grid-item',
  layoutMode: 'fitRows'
});

JavaScript 코드를 해석해보면, .grid 클래스를 가진 요소를 정렬할 대상으로 설정하고 있습니다. itemSelector 속성에는 정렬할 아이템 요소들의 CSS 선택자를 지정합니다. layoutMode 속성은 정렬 방식을 설정하는데, fitRows는 가로 줄에 맞춰 요소를 정렬하는 방식입니다.

마지막으로, 정렬을 수행할 때 이벤트나 조작이 발생했을 때 Isotope 객체에게 정렬을 업데이트하라고 알려주어야 합니다. 예를 들어, 정렬 버튼을 눌렀을 때 정렬을 업데이트하는 기능을 구현하려면 다음과 같이 코드를 작성할 수 있습니다.

var button = document.querySelector('.sort-button');

button.addEventListener('click', function() {
  iso.arrange();
});

위의 코드에서 .sort-button 클래스를 가진 요소를 클릭하면 arrange() 메소드를 이용하여 정렬을 업데이트합니다.

이제 Isotope을 사용하여 동적으로 생성된 요소들을 정렬하는 방법을 알아보았습니다. Isotope 라이브러리의 다양한 옵션과 기능을 더 알고 싶다면 공식 문서를 참고하시기 바랍니다.

참고 문서:

• Isotope 공식 문서