[javascript] Isotope과 함께 페이지 내 새로운 내용을 동적으로 추가하는 방법은 무엇인가요?

01 Dec 2023

javascript

Isotope는 웹사이트에 그리드 레이아웃을 생성하고 관리하기 위한 JavaScript 라이브러리입니다. 페이지에 새로운 내용을 동적으로 추가하고 Isotope 그리드에 적용하는 방법은 간단합니다.

페이지에 새로운 내용을 추가하는 HTML 마크업을 작성합니다. 이때 각각의 내용은 Isotope 그리드에 배치될 아이템으로 표시됩니다. 아래는 예시입니다.

<div class="grid-item">내용 1</div>
<div class="grid-item">내용 2</div>

Isotope 그리드를 초기화하고 설정합니다. 아래는 예시입니다.

// Isotope 그리드를 초기화
var grid = $('.grid').isotope({
  itemSelector: '.grid-item',
});

// 그리드에 새로운 아이템을 추가하는 함수
function addNewItem(content) {
  var $newItem = $('<div class="grid-item">' + content + '</div>');

  // 새로운 아이템을 그리드에 추가
  grid.append($newItem).isotope('appended', $newItem);
}

// 초기 아이템 로딩 완료 후 Isotope 그리드를 레이아웃
grid.imagesLoaded().progress(function () {
  grid.isotope('layout');
});

새로운 내용을 동적으로 추가할 때, addNewItem 함수를 호출하여 Isotope 그리드에 아이템을 추가합니다. 아래는 예시입니다.

addNewItem('새로운 내용');

이렇게 하면 Isotope 그리드에 동적으로 새로운 내용을 추가할 수 있습니다. Isotope는 추가된 아이템을 감지하고 레이아웃을 업데이트해줍니다.