‘Infinite Scroll’은 웹 페이지의 스크롤이 하단에 도착하면 자동으로 새로운 콘텐츠를 로드하여 사용자에게 보여주는 기능을 제공하는 라이브러리입니다. 이 라이브러리는 Isotope와 특히 잘 어울리며, 리스트나 그리드 형태의 요소들을 동적으로 추가할 때 매우 유용합니다.

아래는 ‘Infinite Scroll’을 Isotope와 함께 사용하는 간단한 예제 코드입니다.

var $grid = $('.grid').isotope({
  // Isotope 설정
});

$grid.infiniteScroll({
  // Infinite Scroll 설정
  path: '.next-page-link',
  append: '.grid-item',
  status: '.scroller-status',
  history: false,
  hideNav: '.pagination',
  prefill: true,
  checkLastPage: true
});

위 코드에서 $('.grid')는 Isotope 그리드 컨테이너의 선택자이며, .isotope()을 사용하여 Isotope 기능을 초기화합니다. 아래에는 infiniteScroll()을 사용하여 Infinite Scroll 기능을 초기화하는 부분이 있습니다. 이때 path, append, status, history, hideNav, prefill, checkLastPage와 같은 옵션들을 설정할 수 있습니다.

더 자세한 ‘Infinite Scroll’ 라이브러리의 사용 방법은 공식 문서를 참고하시기 바랍니다. 링크