版本 2.x – Gridzy.Gallery

網站已自動翻譯。如果有不清楚的地方，請查看英文文檔。

基本用法

將 Gridzy 檔案上傳到您的伺服器並將它們新增至您的網站（通常在頭部）：

<link rel="stylesheet" href="gridzy/gridzy.min.css" />
<script src="gridzy/gridzy.min.js"></script>

新增 HTML 程式碼（在正文部分的任意位置）：

<div class="gridzy">
  <img src="https://loremflickr.com/640/480?random=1" alt="a random image" />
  <img src="https://loremflickr.com/480/640?random=2" alt="another random image" />
  <img src="https://loremflickr.com/640/640?random=3" alt="yet another random image" />
  <img src="https://loremflickr.com/640/480?random=4" alt="a random image again" />
  <img src="https://loremflickr.com/640/480?random=5" alt="one last random image" />
</div>

就是這樣！這是一個功能齊全的範例。不需要額外的初始化。

配置

配置 Gridzy 最簡單的方法是只使用 HTML 屬性。您只需在選項名稱前加上data-gridzy-前綴即可。因此，要設定spaceBetween選項，只需新增屬性data-gridzy-spaceBetween 。

<div class="gridzy" data-gridzy-spaceBetween="20" data-gridzy-desiredHeight="400">
  <img src="https://loremflickr.com/640/480?random=1" alt="a random image" />
  <img src="https://loremflickr.com/480/640?random=2" alt="another random image" />
  <img src="https://loremflickr.com/640/640?random=3" alt="yet another random image" />
  <img src="https://loremflickr.com/640/480?random=4" alt="a random image again" />
  <img src="https://loremflickr.com/640/480?random=5" alt="one last random image" />
</div>

主要選項

	預設值	描述
`animate`	`true`	確定當網格變更時（例如，調整瀏覽器視窗大小或設定篩選器時）是否應使用動畫。
`layout`	`justified`	定義所使用的佈局。 Gridzy.js 2 支援兩種不同的佈局`justified`和`waterfall` 。每個選項都有自己的附加選項參數，您可以在此表下方找到這些參數。
`filter`	`*`	確定應顯示哪些影像。任何 CSS 選擇器都可以用作此處的值。通常透過`filterControls`自動設定（請參閱下一個選項）。查看過濾器
`filterControls`		確定哪些表單元素可用於篩選影像。任何選擇 HTML 表單元素的 CSS 選擇器都可以用作此處的值。查看過濾器
`autoConsiderScrollBars`	`true`	預測滾動條出現或消失時的可用寬度。始終建議將其保留為`true`除非這種自動操作會導致問題。

Justified佈局選項

	預設值	描述
`autoFontSize`	`false`	根據原始框大小自動更新每個框的 font-size 屬性。預設情況下，未明確設定 font-size 屬性。
`desiredHeight`	`190`	定義元素行所需的高度。實際高度將根據可用寬度和行中的元素來計算。
`hideOnMissingImage`	`true`	隱藏包含無法載入的圖像的方塊。
`spaceBetween`	`4`	定義元素之間的距離（以像素為單位）。
`lastRowAlign` 從2.3.0版本開始	`justified`	定義最後一行的行為。允許的值為`left` 、 `center` 、 `right`和`justified` 。
`singleRowAlign` 從2.3.0版本開始	`justified`	定義只有一行時的行為。允許的值為`left` 、 `center` 、 `right`和`justified` 。
~~`fillLastRow`~~ ~~從2.1.0版本開始~~	~~`true`~~	自 2.4.0 版本以來已刪除（自 2.3.0 版本起已棄用）排列圖像，使最後一行始終完全填滿。如果您打算動態附加影像，最好停用此功能。對單行沒有影響（請參閱`fillSingleRow` ）。
`fillSingleRow` 從2.1.0版本開始	~~`true`~~	自 2.4.0 版本以來已刪除（自 2.3.0 版本起已棄用） ~~如果只有一行，它會排列圖像，以便該行始終完全填滿。如果圖庫中只有一兩張圖像，那麼停用此功能可能是個好主意。~~

Waterfall版面選項

	預設值	描述
`autoFontSize`	`false`	根據原始框大小自動更新每個框的 font-size 屬性。預設情況下，未明確設定 font-size 屬性。
`desiredWidth`	`250`	定義所需的列寬度。實際寬度將根據可用寬度和列數計算。
`hideOnMissingImage`	`true`	隱藏包含無法載入的圖像的方塊。
`horizontalOrder`	`false`	定義元素嚴格地從左到右放置在每一列中，然後從最左邊的列重新開始，獨立於哪一列的位置更多。預設情況下，元素將始終放置在高度最小的列中。
`spaceBetween`	`4`	定義元素之間的距離（以像素為單位）。
`singleRowAlign` since version 2.7.0	`justified`	Defines the behavior when not all columns can be filled due to too few images. Allowed values are `left`, `center`, `right` and `justified`.

更進階的選項

如需更多進階選項，請查看API 。

語意HTML

Gridzy 最簡單的 HTML 結構是這樣的：

<div class="gridzy">
  <img src="https://loremflickr.com/640/480?random=1" alt="a random image" />
  <img src="https://loremflickr.com/480/640?random=2" alt="another random image" />
  <img src="https://loremflickr.com/640/640?random=3" alt="yet another random image" />
  <img src="https://loremflickr.com/640/480?random=4" alt="a random image again" />
  <img src="https://loremflickr.com/640/480?random=5" alt="one last random image" />
</div>

然而，Gridzy 非常靈活，您可以使用幾乎任何其他 HTML 結構。只需要考慮以下幾點：

容器元素的每個子元素代表網格中的一項。
容器元素及其子元素都可以是任何標記類型，例如ul和li （只需考慮重設瀏覽器預設值）。
如果img元素本身不是直接子元素，則它需要類別gridzyImage 。

所以這也是一個有效的 HTML 結構：

<ul class="gridzy">
  <li>
    <span>
      <img class="gridzyImage" src="https://loremflickr.com/640/480?random=1" alt="a random image" />
    </span>
  </li>
  <li>
    <span>
      <img class="gridzyImage" src="https://loremflickr.com/480/640?random=2" alt="another random image" />
    </span>
  </li>
  <li>
    <span>
      <img class="gridzyImage" src="https://loremflickr.com/640/640?random=3" alt="yet another random image" />
    </span>
  </li>
  <li>
    <span>
      <img class="gridzyImage" src="https://loremflickr.com/640/480?random=4" alt="a random image again" />
    </span>
  </li>
  <li>
    <span>
      <img class="gridzyImage" src="https://loremflickr.com/640/480?random=5" alt="one last random image" />
    </span>
  </li>
</ul>

特別是如果你想添加標題，你需要一個高級的 HTML 結構。要了解更多信息，請查看字幕和皮膚。

字幕和皮膚

如果您想為圖庫新增標題，您需要定義外觀。因此，一些預定義的皮膚是可用的。每個皮膚都包含一個 CSS 檔案。除了主 Gridzy 檔案（通常在 head 部分）之外，您還需要新增此檔案：

<link rel="stylesheet" href="gridzy/skins/gridzySkinClassic/style.min.css" />

此外，您還需要一個進階的 HTML 結構：

<div class="gridzy gridzySkinClassic">
  <figure>
    <img class="gridzyImage" src="https://loremflickr.com/640/480?random=1" alt="a random image" />
    <figcaption class="gridzyCaption">a caption text</figcaption>
  </figure>
  <figure>
    <img class="gridzyImage" src="https://loremflickr.com/480/640?random=2" alt="another random image" />
    <figcaption class="gridzyCaption">another caption text</figcaption>
  </figure>
  <figure>
    <img class="gridzyImage" src="https://loremflickr.com/640/640?random=3" alt="yet another random image" />
    <figcaption class="gridzyCaption">yet another caption text</figcaption>
  </figure>
  <figure>
    <img class="gridzyImage" src="https://loremflickr.com/640/480?random=4" alt="a random image again" />
    <figcaption class="gridzyCaption">a caption text again</figcaption>
  </figure>
  <figure>
    <img class="gridzyImage" src="https://loremflickr.com/640/480?random=5" alt="one last random image" />
    <figcaption class="gridzyCaption">one last caption text</figcaption>
  </figure>
</div>

如果您想了解 HTML 結構，請查看語意 HTML 。

對於標題，您可以使用任何類型的標籤，只需確保它具有gridzyCaption類別。 img元素需要gridzyImage類別。

上面的範例顯示了皮膚gridzySkinClassic 。要使用其他皮膚，只需將皮膚名稱替換為以下之一：

包含的皮膚

	可選課程
gridzySkinBlank 創造自己的肌膚的良好起點即時預覽	`gridzySkinBlank`
gridzySkinClassic 即時預覽	`gridzySkinClassic` `gridzySkinClassicLight`（自 2.6.0 版本起已棄用）
gridzySkinFullOverlay 即時預覽	`gridzySkinFullOverlay` `gridzySkinFullOverlayLight`（自 2.6.0 版本起已棄用）
gridzySkinLift 即時預覽	`gridzySkinLift` `gridzySkinLiftLight`（自 2.6.0 版本起已棄用）
gridzySkinMagnifier 不包括縮放功能即時預覽	`gridzySkinMagnifier` `gridzySkinMagnifierLight`（自 2.6.0 版本起已棄用）

以上所有皮膚只需要一個CSS文件，但還有其他皮膚也需要一個JavaScript文件：

<link rel="stylesheet" href="gridzy/skins/gridzySkinBlur/style.min.css" />
<script src="gridzy/skins/gridzySkinBlur/script.min.js"></script>

	可選課程
gridzySkinBlur 在 IE 中不起作用即時預覽	`gridzySkinBlur` `gridzySkinBlurLight`（自 2.6.0 版本起已棄用）
gridzySkinCard 即時預覽	`gridzySkinCard` `gridzySkinCardLight`（自 2.6.0 版本起已棄用）

皮膚選項

從 2.6.0 版本開始，有配置內建皮膚的選項。根據特定皮膚，您可以設定背景顏色、文字顏色和文字陰影。您只需使用 CSS 自訂屬性，如下所示：

<div class="gridzy gridzySkinClassic" style="--background: rgba(0, 80, 117, .8); --color: rgb(238, 238, 238); ">
  <figure>
    <img class="gridzyImage" src="https://loremflickr.com/640/480?random=1" alt="a random image" />
    <figcaption class="gridzyCaption">a caption text</figcaption>
  </figure>
  <figure>
    <img class="gridzyImage" src="https://loremflickr.com/480/640?random=2" alt="another random image" />
    <figcaption class="gridzyCaption">another caption text</figcaption>
  </figure>

  ...

</div>

在此處查看每個皮膚支援的變數和預設值：

gridzySkinClassic

多變的	預設值	資訊
`--background`	`rgba(0, 0, 0, .7)`	允許任何CSS 背景值
`--color`	`rgb(255, 255, 255)`	允許任何CSS 顏色值
`--text-shadow`	`none`	允許任何CSS 文字陰影值

gridzySkinFullOverlay

多變的	預設值	資訊
`--background`	`rgba(0, 0, 0, .7)`	允許任何CSS 背景值
`--color`	`rgb(255, 255, 255)`	允許任何CSS 顏色值
`--text-shadow`	`none`	允許任何CSS 文字陰影值

gridzySkinLift

多變的	預設值	資訊
`--background`	`rgba(0, 0, 0, .7)`	允許任何CSS 背景值
`--color`	`rgb(255, 255, 255)`	允許任何CSS 顏色值
`--text-shadow`	`0 0 10px rgb(0, 0, 0), 0 0 20px rgb(0, 0, 0), 0 0 30px rgb(0, 0, 0)`	允許任何CSS 文字陰影值

gridzySkinMagnifier

多變的	預設值	資訊
`--background`	`rgba(0, 0, 0, .7)`	允許任何CSS 背景值
`--color`	`rgb(255, 255, 255)`	允許任何CSS 顏色值

該皮膚不支援--text-shadow

gridzySkinBlur

多變的	預設值	資訊
`--background`	`rgba(0, 0, 0, .7)`	允許任何CSS 背景值
`--color`	`rgb(255, 255, 255)`	允許任何CSS 顏色值
`--text-shadow`	`0 0 10px rgb(0, 0, 0)`	允許任何CSS 文字陰影值

gridzySkinCard

多變的	預設值	資訊
`--background`	`rgba(0, 0, 0, 1)`	允許任何CSS 背景值
`--color`	`rgb(255, 255, 255)`	允許任何CSS 顏色值
`--text-shadow`	`none`	允許任何CSS 文字陰影值

所有預先定義的皮膚僅支援簡單的文字標題。您可以創建自己的更複雜的皮膚。請看一下Gridzy 風格。

格子風格

如果沒有預先定義的皮膚適合您的需求，您可以設計自己的皮膚。

最簡單的方法是先複製現有的皮膚並根據自己的需求進行調整。預先定義的皮膚gridzySkinBlank通常會提供良好的基礎以及 CSS 文件中的良好文件：

/** SKIN Blank **/

/* all gallery items (direct children of the main container element) */
.gridzySkinBlank > .gridzyItem {
  overflow: hidden;
}

/* all gallery images (predefined in Gridzy's main CSS file, but can be overridden) */
.gridzySkinBlank .gridzyImage {
}

/* all gallery captions (just create your very own style) */
.gridzySkinBlank .gridzyCaption {
  margin: 0;
  padding: .5em;
  opacity: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  transition: opacity .5s;
  overflow: auto;
  background: rgba(0, 0, 0, .7);
  color: rgb(255, 255, 255);
}

.gridzySkinBlank > .gridzyItem:hover .gridzyCaption {
  opacity: 1;
}

在 CSS 檔案中，您將找到gridzySkinBlank 、 gridzyImage和gridzyCaption類別。 Gridzy 本身不需要這些類別。它們僅用於樣式設置，因此您可以根據需要刪除或重新命名它們。

此外，您還會發現 CSS 類別gridzyItem 。 Gridzy 會自動將此類設定為主容器元素的所有直接子元素。因此，您可以使用此類來設定畫廊項目的樣式。

留意重要的事情

項目內容應該完全響應。考慮到元素大小肯定會改變。使用百分比值而不是像素值。看看 Gridzy 佈局選項autoFontSize ，它將字體大小綁定到項目框大小。
每個項目都應該有明確的長寬比。該項目的長寬比永遠不會改變，並且需要計算網格。因此，如果某個項目沒有自動具有明確定義的寬高比，請手動預先定義它（例如透過 css）。

在某些情況下，在 Gridzy 初始化之前設定項目內容的樣式可能會更容易。為此，只需暫時刪除gridzy類別或 Gridzy javascript 檔案即可。

就是這樣！這就是建立您自己的皮膚所需的全部內容。大多數預先定義的皮膚不會使用更多的東西。

但如果你喜歡的話，還可以有更多…

高級皮膚

Gridzy 使用更多的 CSS 類，而不僅僅是gridzyItem 。它們中的大多數都會自動設置，您也可以使用它們進行樣式設定。

主要容器類

班級名稱	描述
`gridzy` 手動設定	Gridzy 會自動尋找具有此類別的元素並初始化它們。
`gridzyAnimated`	如果選項`animate`為`true`將自動設定。如果這個類別是手動設定的，選項`animate`也會自動變成`true` （除非它被明確設定為`false` ）。

項目類別

班級名稱	描述
`gridzyItem`	將在專案開始初始化過程後立即設定。永遠不會被刪除。
`gridzyItemInitializing`	將在專案開始初始化過程後立即設定。一旦項目完全初始化，將被`gridzyItemReady`取代。並不表示圖像已完全載入（請參閱`gridzyItemLoading` ），而是項目已準備好可見。
`gridzyItemReady`	一旦項目完全初始化，將取代`gridzyItemInitializing` 。永遠不會被刪除。並不表示圖像已完全載入（請參閱`gridzyItemComplete` ），而是項目已準備好可見。
`gridzyItemLoading`	將在專案開始初始化過程後立即設定。一旦包含的圖像（通常只有一張）完全加載，將被`gridzyItemComplete`取代。
`gridzyItemComplete`	一旦包含的圖像（通常只有一張）完全加載，將替換`gridzyItemLoading` 。永遠不會被刪除。
`gridzyItemInitialToVisible`	該項目第一次開始出現時將被設定。一旦該項目完全可見，就會被刪除。
`gridzyItemVisible`	該項目完全可見後將立即設定。一旦該物品開始消失，就會被刪除。
`gridzyItemVisibleToHidden`	一旦該項目開始消失就會被設定。一旦該項目完全隱藏，就會被刪除。
`gridzyItemHidden`	該項目完全隱藏後將立即設定。一旦該項目開始出現，就會被刪除。
`gridzyItemHiddenToVisible`	將在項目開始出現時立即設定（第一次出現除外 - 請參閱類別`gridzyItemInitialToVisible` ）。一旦該項目完全可見，就會被刪除。
`gridzyItemVisibleToVisible`	一旦網格中的某些內容發生更改，就會立即設置，但項目本身仍然可見。更改動畫完成後將被刪除。

預設情況下，進程指示器以及圖片出現和消失的動畫是由 Gridzy 主 CSS 檔案預先定義的。

透過上面提到的這些 CSS 類，您可以設計自己的流程指示器和動畫。敢於查看 Gridzy 主 CSS 文件，以了解您必須涵蓋的內容。不用擔心，一切都有詳細記錄。

最佳化載入

如果您使用許多圖像，那麼幫助 Gridzy 更快地建立網格可能是個好主意。

防止影像跳躍

Gridzy 絕對需要所有影像的長寬比來計算網格。如果某些圖像已準備好而其他圖像尚未準備好，這些事實會導致元素跳躍。影像越多，這種效果就越令人討厭。

要防止這種行為，只需為所有img元素設定width和height屬性即可。為每個單獨的影像設定正確的值非常重要，否則影像會失真。正確的值是對應影像的原始寬度和高度：

<div class="gridzy">
  <img src="https://loremflickr.com/640/480?random=1" width="640" height="480" alt="a random image" />
  <img src="https://loremflickr.com/480/640?random=2" width="480" height="640" alt="another random image" />
  <img src="https://loremflickr.com/640/640?random=3" width="640" height="640" alt="yet another random image" />
  <img src="https://loremflickr.com/640/480?random=4" width="640" height="480" alt="a random image again" />
  <img src="https://loremflickr.com/640/480?random=5" width="640" height="480" alt="one last random image" />
</div>

此後，Gridzy 可以立即計算網格，而無需知道圖像的實際大小。

延遲載入

若要僅載入可見視口中的影像，只需執行以下步驟：

如上所述插入width和height屬性（確保使用正確的值）
將所有src屬性替換為data-gridzylazysrc ，如下所示（如果您也有srcset屬性，請將它們替換為data-gridzylazysrcset ）。

<div class="gridzy">
  <img data-gridzylazysrc="https://loremflickr.com/640/480?random=1" width="640" height="480" alt="a random image" />
  <img data-gridzylazysrc="https://loremflickr.com/480/640?random=2" width="480" height="640" alt="another random image" />
  <img data-gridzylazysrc="https://loremflickr.com/640/640?random=3" width="640" height="640" alt="yet another random image" />
  <img data-gridzylazysrc="https://loremflickr.com/640/480?random=4" width="640" height="480" alt="a random image again" />
  <img data-gridzylazysrc="https://loremflickr.com/640/480?random=5" width="640" height="480" alt="one last random image" />
</div>

完成這些步驟後，圖片一旦靠近或位於視窗內就會載入。

製程指示器

進程指示器是載入圖片時出現的小動畫圖示。如果您使用標題和皮膚，進程指示器將自動顯示。否則你需要一些調整：

將每個img元素放入div元素中
（或任何其他元素 - 請參閱語意 HTML以了解更多資訊）
將類別gridzyImage加入到每個img元素

<div class="gridzy">
  <div><img src="https://loremflickr.com/640/480?random=1" class="gridzyImage" alt="a random image" /></div>
  <div><img src="https://loremflickr.com/480/640?random=2" class="gridzyImage" alt="another random image" /></div>
  <div><img src="https://loremflickr.com/640/640?random=3" class="gridzyImage" alt="yet another random image" /></div>
  <div><img src="https://loremflickr.com/640/480?random=4" class="gridzyImage" alt="a random image again" /></div>
  <div><img src="https://loremflickr.com/640/480?random=5" class="gridzyImage" alt="one last random image" /></div>
</div>

之後，如果圖像載入時間較長，您應該會看到進程指示器。

過濾器

Gridzy 中的濾鏡非常簡單但功能強大。無論你需要什麼樣的過濾器，都很有可能是可以實現的。您所需要的只是一點 CSS 和一些 HTML 表單元素…

這是一個功能範例：

<div id="myFilterControls">
  <button value="*">All</button>
  <button value=".animals">Animals</button>
  <button value=".architecture">Architecture</button>
  <button value=".people">People</button>
</div>

<div class="gridzy" data-gridzy-filterControls="#myFilterControls button">
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=1" alt="a random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=1" alt="a random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=1" alt="a random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=2" alt="another random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=2" alt="another random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=2" alt="another random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=3" alt="yet another random animal image" />
</div>

讓我們一步步來建立它

1.首先，我們需要 Gridzy 的常用 HTML 結構，並為所有圖庫項目設定類別名稱，以便之後可以過濾它們

<div class="gridzy">
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=1" alt="a random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=1" alt="a random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=1" alt="a random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=2" alt="another random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=2" alt="another random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=2" alt="another random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=3" alt="yet another random animal image" />
</div>

在此範例中，我們僅為每個元素使用一個類別。但是，如果可以透過多個篩選器找到該元素，您也可以為單一元素設定多個類別。

2.然後我們添加一些按鈕，透過它們我們可以更改過濾器

<button value="*">All</button>
<button value=".animals">Animals</button>
<button value=".architecture">Architecture</button>
<button value=".people">People</button>

<div class="gridzy">
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=1" alt="a random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=1" alt="a random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=1" alt="a random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=2" alt="another random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=2" alt="another random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=2" alt="another random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=3" alt="yet another random animal image" />
</div>

除了按鈕之外，您還可以使用其他表單元素，例如核取方塊、單選按鈕、選擇欄位等。

正如您所看到的，按鈕的值是常見的 CSS 選擇器。完成後，按一下此類按鈕將顯示與該 CSS 選擇器相符的圖像。從技術上講，它只是將filter選項設定為此值。

您也可以使用更複雜的選擇器。例如:not(.animals)也可以工作，以及.animals.people和.animals, .people 。

3.最後，我們將按鈕封裝在div容器中，並透過設定filterControls選項將它們綁定到 Gridzy 庫：

<div id="myFilterControls">
  <button value="*">All</button>
  <button value=".animals">Animals</button>
  <button value=".architecture">Architecture</button>
  <button value=".people">People</button>
</div>

<div class="gridzy" data-gridzy-filterControls="#myFilterControls button">
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=1" alt="a random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=1" alt="a random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=1" alt="a random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=2" alt="another random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=2" alt="another random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=2" alt="another random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=3" alt="yet another random animal image" />
</div>

如您所看到的，我們也為filterControls選項使用 CSS 選擇器。具有id屬性的div容器僅用於使按鈕更容易透過 CSS 選擇器進行選擇。

就是這樣！

如果您更喜歡 JavaScript 解決方案，請查看API 。

應用程式介面

儘管 Gridzy 有自己的 API，但大多數事情都可以在沒有它的情況下完成，只需操作 DOM。 Gridzy 會注意到它並調整網格。但還有一個非常強大的API…

操作 DOM

對於所有文檔物件模型 (DOM)操作，我們首先需要容器元素：

// get the container element
var gridzyElement = document.querySelector('.gridzy');

新增圖片

在將新子元素添加到容器元素之前，完整建置並填充它非常重要。否則 Gridzy 無法偵測到正確的尺寸。

// create a new img element
var newImage = document.createElement('img');

// add src attribute (!! before you add it to the container element !!)
newImage.src = 'https://loremflickr.com/640/480';

// add it as last element to the container element
gridzyElement.appendChild(newImage);

// or as first element (or anywhere in between)
gridzyElement.insertBefore(newImage, gridzyElement.firstChild);

刪除影像

// remove the first image
gridzyElement.removeChild(gridzyElement.firstElementChild);

更改選項

// change the spaceBetween option to a specific value
gridzyElement.setAttribute('data-gridzy-spaceBetween', '10');

// change the layout option to a specific value
gridzyElement.setAttribute('data-gridzy-layout', 'waterfall');

// reset the spaceBetween option to its default value
gridzyElement.removeAttribute('data-gridzy-spaceBetween');

有關操作 DOM 的更多信息，您可以在MDN Web 文件中找到。還有DOM 簡介。

專有API

要使用該 API，我們首先需要 Gridzy 實例，該實例綁定到 Gridzy 容器元素：

// get the Gridzy instance
var gridzyInstance = document.querySelector('.gridzy').gridzy;

取得選項

// get the value of a single option
var currentLayout = gridzyInstance.getOption('layout');

取得所有選項

// get all option values as an object
var currentOptions = gridzyInstance.getOptions();

設定選項

// set specific option values
gridzyInstance.setOptions({
  spaceBetween: 10,
  layout: 'waterfall'
});

// or reset options to their default values
gridzyInstance.setOptions({
  spaceBetween: null,
  layout: null
});

應用過濾器

應用程式過濾器只是設定選項filter ，可以是任何有效的 CSS 選擇器：

// set the filter to match items with class "animals"
gridzyInstance.setOptions({
  filter: '.animals'
});

// reset the filter to match all items again
gridzyInstance.setOptions({
  filter: '*'
});

// set the filter to match items without class "animals"
gridzyInstance.setOptions({
  filter: ':not(.animals)'
});

// set the filter to match items with class "animals" or "people"
gridzyInstance.setOptions({
  filter: '.animals, .people'
});

// set the filter to match items that have both classes, "animals" and "people"
gridzyInstance.setOptions({
  filter: '.animals.people'
});

新增回調函數

自 2.4.0 版本起已棄用
請改用現代且更靈活的活動。有關詳細信息，請參閱下一節。

~~Gridzy.js 2 支援回呼函數的一些選項。它們只能透過專有 API 設置，但就像其他選項一樣：~~

// same as set other options
gridzyInstance.setOptions({
  onOptionsChanged: function() {
    // will be executed each time the options have changed.
  },
  onBeforeOptionsChanged: function() {
    // will be executed, before new options take effect.
  }
});

	描述
~~`onBeforeOptionsChanged`~~	~~在設定選項之前直接呼叫的回調函數。~~
~~`onOptionsChanged`~~	~~設定選項後直接呼叫的回調函數。~~
~~`onBeforeRender`~~	~~在渲染之前直接呼叫的回調函數。~~
~~`onRender`~~	~~渲染後直接呼叫的回調函數。~~

使用事件

從2.4.0版本開始

您可以像通常的 JavaScript 事件一樣使用 Gridzy 事件：

document.addEventListener('gridzyOptionsChanged', function(event) {
    // will be executed each time the options have changed.
});

document.addEventListener('gridzyBeforeOptionsChanged', function(event) {
    // will be executed, before new options take effect.
});

某些事件在 Gridzy 容器元素上觸發，其他事件在容器元素內的各個項目元素上觸發。

在 Gridzy 容器元素上觸發的事件：

	描述
`gridzyBeforeInit`	在畫廊初始化之前觸發。
`gridzyInit`	圖庫初始化後觸發。
`gridzyBeforeOptionsChanged`	在設定選項之前觸發。
`gridzyOptionsChanged`	設定選項後觸發。
`gridzyBeforeRender`	渲染前觸發。
`gridzyRender`	渲染後觸發。

如果您錯過此處的任何活動，請發送支援請求。

event.target提供 Gridzy 容器元素。
event.detail.instance提供 Gridzy 實例。

在項目元素上觸發的事件：

	描述
`gridzyItemBeforeInit`	在項目初始化之前觸發。
`gridzyItemInit`	項目初始化後觸發。
`gridzyItemLoading`	當項目開始載入時觸發。
`gridzyItemReady`	當項目準備好進行網格計算時觸發。因此縱橫比已知，但圖像可能仍在加載。
`gridzyItemComplete`	當項目圖像完全載入時觸發。

如果您錯過此處的任何活動，請發送支援請求。

event.target提供對應的 item 元素。
event.detail.instance提供 Gridzy 實例。

API – 全球

有一些功能獨立於 Gridzy 實例。所以我們之前不需要取得實例。

取得預設選項

// get the default value of a single option
var defaultLayout = Gridzy.getDefaultOption('layout');

取得所有預設選項

// get all default option values as an object, including the default layout options of the default layout
var defaultOptions = Gridzy.getDefaultOptions();

// or get all default option values, including the default layout options of a specific layout
var defaultOptions = Gridzy.getDefaultOptions('waterfall');

設定預設選項

這不會設定所有已初始化的 Gridzy 實例的選項，而是定義新實例的基礎。但是，如果透過值null重置現有實例的選項，它將使用新的預設值。

// set default option values
Gridzy.setDefaultOptions({
  spaceBetween: 10,
  layout: 'waterfall'
});

如果您在 DOM 準備好之前調用它，您可以使用它來全域設定選項。因此您不再需要將選項設為屬性。

自動化

只要 Gridzy.js 2 的所有自動功能都處於作用中狀態，就不需要以下方法。但可以關閉自動功能，以更傳統的方式使用 Gridzy：

// disable automatic initializations
Gridzy.setDefaultOptions({
  autoInitOnDomReady: false,
  autoInitOnDomMutation: false
});

// or switch off all mutation observers
Gridzy.setDefaultOptions({
  autoInitOnDomMutation: false,
  autoSyncChildListMutation: false,
  autoSyncAttributesMutation: false,
  autoSyncChildClassMutation: false,
  autoSyncImageMutation: false
});

由於邏輯原因，其中一些選項無法透過data-gridzy- attribute 或setOptions()設定：

	預設值	描述
`autoInitOnDomReady`	`true`	在頁面載入時偵測具有`gridzy`類別的元素並初始化它們。可透過`Gridzy.setDefaultOptions()`設置
`autoInitOnDomMutation` 變異觀察者	`true`	一旦新元素出現在 DOM 中，就會偵測到帶有`gridzy`類別的新元素並初始化它們。（例如使用頁面轉換）可透過`Gridzy.setDefaultOptions()`設置
`autoSyncChildListMutation` 變異觀察者	`true`	偵測是否新增或刪除子元素（影像），並自動更新網格。可透過`data-grizy-` 、 `new Gridzy()` 、 `setOptions()` 、 `Gridzy.setDefaultOptions()`設定
`useOptionAttributes`	`true`	定義是否通常使用`data-gridzy-`屬性。如果這是`false`則只能透過專有 API 設定選項。可透過`new Gridzy()` 、 `setOptions()` 、 `Gridzy.setDefaultOptions()`設定
`autoSyncAttributesMutation` 變異觀察者	`true`	偵測`data-gridzy-`屬性的變化，並自動更新網格。也偵測是否新增或刪除了`gridzyAnimated`類別以及`style`屬性是否發生變更。如果`useOptionAttributes`為`false` ，則它僅偵測`style`屬性變更。可透過`data-grizy-` 、 `new Gridzy()` 、 `setOptions()` 、 `Gridzy.setDefaultOptions()`設定
`autoSyncChildClassMutation` 變異觀察者	`true`	檢測所有子元素（影像）的`class`屬性的變化。與過濾器相關。可透過`data-grizy-` 、 `new Gridzy()` 、 `setOptions()` 、 `Gridzy.setDefaultOptions()`設定
`autoSyncImageMutation` 變異觀察者從2.5.0版本開始	`true`	檢測所有影像的`src`屬性的變化。與 React 或類似函式庫一起使用時相關。可透過`data-grizy-` 、 `new Gridzy()` 、 `setOptions()` 、 `Gridzy.setDefaultOptions()`設定
`autoRenderOnResize` 調整大小觀察者從2.6.0版本開始	`true`	檢測元素寬度的變化。與響應式設計相關。（在 2.6.0 版本之前，使用了視窗調整大小事件偵聽器）可透過`data-grizy-` 、 `new Gridzy()` 、 `setOptions()` 、 `Gridzy.setDefaultOptions()`設定

手動初始化

// initialize a new Gridzy instance
var gridzyInstance = new Gridzy(document.querySelector('.gridzy'), {
  spaceBetween: 10,
  layout: 'waterfall'
});

銷毀實例

粗略地說，與初始化 Gridzy 相反。

gridzyInstance.destroy();
gridzyInstance = null;

手動同步子列表

// after child elements (images) are added to or removed from the DOM.
gridzyInstance.syncChildList();

手動同步單一子元素

通常不需要，除非在極少數情況下。

// after child elements (images) are added to the DOM and only one of them should be synced to Gridzy.
gridzyInstance.syncChild(childElement);

手動同步屬性

請注意， useOptionAttributes選項必須為true 。

// after data-gridzy- attributes have changed
gridzyInstance.syncAttributes();

強制渲染

通常不需要，即使所有自動功能都已關閉

gridzyInstance.render();

WordPress 外掛

JavaScript 函式庫

服務