jquery.isotope

ui-component layout animation

jquery.isotope는 jQuery 플러그인으로, 다양한 필터링과 정렬 기능을 통해 동적인 레이아웃을 마법처럼 조작할 수 있게 해주는 라이브러리입니다. 사용자가 정의한 기준에 따라 요소들을 자동으로 정렬하고 필터링하여, 반응형 웹 디자인에 적합한 인터랙티브한 경험을 제공합니다.

Latest Ver 3.0.6

Homepage

Github

11,094

📢 jquery.isotope는 웹 페이지 내 요소들을 정렬하고 필터링하는 jQuery 플러그인입니다.

CDN 다운로드

License: GPL-3.0

Asset Type :

전체 버전 보기

https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.js

https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.min.js

Sample Code

⚠️ import 문을 포함한 일부 코드는 jsFiddle에서 정상 실행되지 않을 수 있습니다. 실행 오류가 발생할 경우 코드 복사 후 직접 실행해보세요.

📄 HTML
<div id='container'>
  <div class='item'>Item 1</div>
  <div class='item'>Item 2</div>
  <div class='item'>Item 3</div>
</div>

🧩 External JS
<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>

⚙️ JavaScript
$(document).ready(function() {
  $('#container').isotope({
    itemSelector: '.item'
  });
});