[javascript] Isotope을 사용하여 반응형 웹 디자인을 구현하는 방법은 무엇인가요?

01 Dec 2023

javascript

Isotope는 JavaScript 라이브러리로서, 그리드 레이아웃을 만들고 다양한 필터링 및 정렬 기능을 제공하는 데 사용됩니다. 이를 사용하여 반응형 웹 디자인을 구현할 수 있습니다.

Isotope 라이브러리를 다운로드하고 HTML 문서의 헤드 부분에 링크를 추가합니다:

<head>
  <link rel="stylesheet" href="path/to/isotope.css">
  <script src="path/to/jquery.js"></script>
  <script src="path/to/isotope.pkgd.js"></script>
</head>

그런 다음, 그리드로 사용할 요소들을 마크업하고 필터링 및 정렬에 사용할 클래스를 지정합니다:

<div class="grid">
  <div class="grid-item item1">Item 1</div>
  <div class="grid-item item2">Item 2</div>
  <div class="grid-item item3">Item 3</div>
  ...
</div>

CSS를 사용하여 그리드 아이템에 스타일을 적용할 수 있습니다.

JavaScript 코드를 통해 Isotope를 초기화하고 옵션을 설정합니다:

$(document).ready(function() {
  $('.grid').isotope({
    itemSelector: '.grid-item',
    layoutMode: 'masonry' // 그리드 레이아웃 모드 설정 (다른 옵션: fitRows, vertical)
  });
});

이제 Isotope 그리드를 초기화했으므로 필터 버튼 등 이벤트를 통해 그리드를 제어하거나 필터링할 수 있습니다.

예를 들어, 다음은 카테고리별로 그리드 아이템을 필터링하는 버튼을 생성하는 코드입니다:

<button data-filter=".category1">Category 1</button>
<button data-filter=".category2">Category 2</button>
<button data-filter=".category3">Category 3</button>

클릭 이벤트를 통해 필터링을 처리하는 JavaScript 코드는 다음과 같습니다:

$('button').on('click', function() {
  var filterValue = $(this).attr('data-filter');
  $('.grid').isotope({ filter: filterValue });
});

이렇게 하면 카테고리에 해당하는 그리드 아이템만 보이게 할 수 있습니다.

Isotope는 더 많은 기능과 옵션이 있으며, 공식 문서를 참조하면 더 자세한 내용을 확인할 수 있습니다.