Isotope는 JavaScript 라이브러리로, 그리드 레이아웃과 필터링 기능을 갖춘 요소를 동적으로 정렬하는 데 사용됩니다. 기본적으로 Isotope는 단일 레이아웃 옵션만을 지원하지만, 다양한 레이아웃을 동시에 사용하는 다중 레이아웃 옵션을 구현하기 위해 일부 작업을 수행해야 합니다.

먼저, 다중 레이아웃을 구현하기 위해서는 Isotope의 메소드를 활용해야 합니다. 이를 위해 Isotope의 layoutMode 옵션을 사용하여 다른 레이아웃을 정의해야 합니다. 다음은 다중 레이아웃을 사용하는 예제입니다.

// Isotope 기본 설정
var $grid = $('.grid').isotope({
  itemSelector: '.grid-item',
  layoutMode: 'masonry', // 기본 레이아웃
});

// 다른 레이아웃 정의
var otherLayout = {
  masonry: {
    columnWidth: '.grid-sizer',
    gutter: '.gutter-sizer',
  },
  fitRows: {
    gutter: '.gutter-sizer',
  }
};

// 버튼 클릭 시 다른 레이아웃 적용
$('.layout-button').on('click', function() {
  var layout = $(this).data('layout');
  $grid.isotope({
    layoutMode: layout, // 다른 레이아웃 적용
    masonry: otherLayout[layout] // 해당 레이아웃에 대한 추가 구성 옵션
  });
});

위의 코드에서 otherLayout 객체는 사용자가 원하는 다른 레이아웃 옵션을 정의합니다. 이 객체는 masonry와 fitRows 레이아웃에 대한 구성 옵션을 가지고 있습니다.

layout-button 클래스를 가진 버튼을 클릭하면 해당 버튼에 지정된 data-layout 속성 값에 따라 다른 레이아웃이 적용됩니다. Isotope의 isotope 메소드를 사용하여 layoutMode를 변경하고, masonry 키를 사용하여 해당 레이아웃에 대한 추가 구성 옵션을 적용합니다.

위의 예제를 적용하면, 버튼을 클릭하여 다른 레이아웃을 선택할 수 있으며, 각 레이아웃에 대한 구성 옵션을 따로 정의할 수 있습니다.

Isotope에서 다른 레이아웃을 동시에 사용하는 다중 레이아웃 옵션을 구현하기 위해 위의 예제를 참고하여 적절한 레이아웃과 구성 옵션을 정의하고, 이를 적용하는 방식으로 다중 레이아웃을 구현할 수 있습니다.

더 많은 정보를 원한다면 Isotope documentation을 참조하시기 바랍니다.