packery

layout ui-component responsive

Packery는 다양한 크기의 요소들을 효율적으로 배치할 수 있도록 도와주는 라이브러리입니다. 이 라이브러리는 빈 공간 없이 요소들을 촘촘하게 정렬할 수 있는 ‘bin-packing’ 알고리즘을 사용합니다. 웹 페이지에서 동적으로 요소들을 배치하고자 할 때 유용하게 사용할 수 있습니다.

Latest Ver 3.0.0

Homepage

Github

4,203

각자의 자리, 완벽한 조화

끊임없이 변화하는 레이아웃을 통해 웹 페이지의 가능성을 확장하세요.

Packery는 웹 요소들을 효율적으로 배치하는 라이브러리입니다.

CDN 다운로드

License: GPL-3.0

Asset Type :

전체 버전 보기

https://cdnjs.cloudflare.com/ajax/libs/packery/3.0.0/packery.pkgd.js

https://cdnjs.cloudflare.com/ajax/libs/packery/3.0.0/packery.pkgd.min.js

Sample Code

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

📄 HTML
<div class="grid"><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div></div><script>var elem = document.querySelector('.grid');var pckry = new Packery(elem, {itemSelector: '.item', gutter: 10});</script>

🧩 External JS
<script src="https://cdnjs.cloudflare.com/ajax/libs/packery/2.1.2/packery.pkgd.min.js"></script>

⚙️ JavaScript
var elem = document.querySelector('.grid');var pckry = new Packery(elem, {itemSelector: '.item', gutter: 10});