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});