jQuery Isotope 是一種流暢的網格布局庫，它使用 jQuery 庫來創建很棒的過濾器和排序器。在這篇文章中，我們將探討使用 jQuery Isotope 的基本功能以及如何在您的網站中使用它來呈現動態網格。 首先，我們需要引入 jQuery 和 Isotope，您可以從官方網站（https://isotope.metafizzy.co/）中下載并使用它們。在引入之后，請遵循以下步驟來實現 Isotope 的基本功能： 1. 創建一個容器并為其分配一個唯一的 ID：

<div id="grid"></div>

2. 創建一個網格項并為其分配一個類名。您可以隨意創建任意數量的項：

<div class="item">ITEM ONE</div>
<div class="item">ITEM TWO</div>
<div class="item">ITEM THREE</div>

3. 初始化 Isotope 對象并定義選項：

<script>
$(document).ready(function(){
$('#grid').isotope({
itemSelector: '.item',
layoutMode: 'fitRows'
});
});
</script>

在此示例中，我們指定 itemSelector 類，從而將所有 Isotope 網格項包含到容器中。我們還將 layoutMode 設置為 fitRows，這意味著所有項將被放置在一行上，而不是在網格中。 現在您已經完成了最基本的設置，讓我們添加一些過濾器和排序器以使它更加有吸引力。 1. 過濾器 您可以使用過濾器來根據項目的類名過濾和顯示項目。例如，如果我們想僅顯示與類名為 .filter-one 的項目，則可以使用以下代碼段：

<button data-filter=".filter-one">Filter One</button>
<button data-filter=".filter-two">Filter Two</button>
<button data-filter=".filter-three">Filter Three</button>
<script>
$(document).ready(function(){
$('#grid').isotope({
itemSelector: '.item',
layoutMode: 'fitRows'
});
$('button').click(function(){
var selector = $(this).attr('data-filter');
$('#grid').isotope({ filter: selector });
});
});
</script>

在該代碼段中，我們創建了三個按鈕，并為它們分配了 data-filter 屬性。當任何按鈕被單擊時，我們將從該按鈕中檢索該屬性的值，并使用該值來篩選網格中的項。 2. 排序器 與過濾器類似，您也可以使用排序器來根據項目的數據進行排序和顯示。例如，如果我們想按項目標題字母順序排序，則可以使用以下代碼：

<button data-sort-by="name:asc">Sort A-Z</button>
<button data-sort-by="name:desc">Sort Z-A</button>
<script>
$(document).ready(function(){
$('#grid').isotope({
itemSelector: '.item',
layoutMode: 'fitRows',
getSortData: {
name: '.name'
}
});
$('button').click(function(){
var sortValue = $(this).attr('data-sort-by');
$('#grid').isotope({ sortBy: sortValue });
});
});
</script>

在該代碼段中，我們創建了兩個按鈕，并為它們分配了 data-sort-by 屬性。該屬性將用于指定排序順序，我們將其分配到按鈕的值中。我們還使用了一個名為 getSortData 的選項來指定按名稱排序的數據屬性。 jQuery Isotope 是一種優秀的 JavaScript 庫，可以輕松為網格布局添加動態功能。希望本文能幫助您了解它的基本用法。