[javascript] Isotope을 사용하여 고객 리뷰를 그리드 형식으로 표시하는 방법은 무엇인가요?

01 Dec 2023

javascript

Isotope은 웹 페이지에서 요소를 그리드 형식으로 정렬하고 필터링할 수 있는 라이브러리입니다. 이를 사용하여 고객 리뷰를 그리드 형식으로 표시하는 방법을 알아보겠습니다.

먼저, Isotope 라이브러리를 HTML 파일에 추가해야 합니다. 다음 스크립트 태그를 <head> 태그 안에 추가하세요.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.min.js"></script>

그리고 고객 리뷰를 표시할 그리드 컨테이너를 생성해야 합니다. 이 컨테이너에 각각의 리뷰 아이템을 추가할 것입니다. 다음과 같이 HTML 코드를 작성하세요.

<div class="grid">
  <div class="item">고객 리뷰 1</div>
  <div class="item">고객 리뷰 2</div>
  <div class="item">고객 리뷰 3</div>
  <!-- 필요한 만큼 리뷰 아이템을 추가하세요 -->
</div>

다음은 JavaScript 코드입니다. 이 코드는 Isotope 라이브러리를 초기화하고 그리드를 설정합니다.

$(document).ready(function() {
  var $grid = $('.grid').isotope({
    itemSelector: '.item',
    layoutMode: 'fitRows'
  });
});

위 코드에서 itemSelector는 그리드의 각 리뷰 아이템을 지정하고, layoutMode는 그리드 레이아웃을 설정합니다. fitRows는 그리드의 행을 균등하게 배치하는 방식입니다.

여기서 필터링 기능을 추가하려면, 필터 버튼을 추가한 후 해당 버튼을 클릭했을 때 Isotope의 filter 메소드를 사용하여 필터를 적용하세요. 다음은 필터 버튼을 추가한 예시 코드입니다.

<button data-filter=".positive">긍정적인 리뷰</button>
<button data-filter=".negative">부정적인 리뷰</button>
<button data-filter="*">모두 보기</button>

그리고 JavaScript 코드의 $grid.isotope({}) 안에 다음 코드를 추가하여 필터링 기능을 구현합니다.

jQuery('.filters button').click(function(){
  var filterValue = jQuery(this).data('filter');
  $grid.isotope({ filter: filterValue });
});

위 코드에서 .filters는 필터 버튼들을 감싸고 있는 요소의 클래스명입니다. 이를 원하는 대로 변경하세요.

이제 고객 리뷰를 그리드 형식으로 표시하고 필터링할 수 있는 Isotope 구현이 완료되었습니다. 자신에게 맞게 리뷰 아이템과 필터 버튼, CSS 스타일링 등을 추가해보세요.

Isotope 공식 문서에서 더 많은 정보와 옵션을 확인할 수 있습니다. Isotope 공식 문서 링크