Isotope CDNを利用するには、まずページのヘッドセクションにCDNのリンクを追加する必要があります。以下のコードを参考にしてください。
<head>
<!-- Isotope CDNのリンク -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/isotope.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/isotope.pkgd.min.js"></script>
</head>これにより、Isotopeのスタイルシートとスクリプトが読み込まれます。
次に、Isotopeを使用したい要素に適用するためのHTML構造を作成します。以下は例です。
<div class="grid">
<div class="grid-item">要素1</div>
<div class="grid-item">要素2</div>
<div class="grid-item">要素3</div>
<!-- 追加の要素をここに追加 -->
</div>この例では、gridというクラスを持つ親要素の中に、grid-itemというクラスを持つ子要素があります。
最後に、JavaScriptを使用してIsotopeを初期化し、要素のフィルタリングやソートなどの操作を行います。以下のコードを参考にしてください。
<script>
// Isotopeを初期化
var grid = document.querySelector('.grid');
var iso = new Isotope(grid, {
// オプションを設定
itemSelector: '.grid-item',
layoutMode: 'fitRows'
});
// フィルタリングやソートなどの操作を行うためのボタンなどを作成し、イベントリスナーを設定
// 例: フィルタリングボタン
var filterButtons = document.querySelectorAll('.filter-button');
filterButtons.forEach(function(button) {
button.addEventListener('click', function() {
var filterValue = this.getAttribute('data-filter');
iso.arrange({ filter: filterValue });
});
});
</script>これでIsotope CDNを使った要素のフィルタリングやソートなどが可能になります。
以上がIsotope CDNの使い方と、シンプルかつ効果的な方法の解説です。この記事を通じて、Isotopeを利用したフロントエンド開発のパフォーマンス向上に役立つことを願っています。