jQuery為廣大用戶提供了一種簡單的方法來選擇HTML元素和操作DOM，并且能更加動態、更加靈活的前端布局，據統計有95.4％的網站使用jQuery。

jQuery Grids是怎樣工作的?

jQuery的網格可以為你的網站創建像Pinterest一樣的布局。它像一個虛擬矩陣一樣工作，并且遵循“箱內嵌”原則。 jQuery的網格動態計算出什么是項目最好的安排以及填充頁面的方式，使的空白空間最少，如下圖。

相比的CSS網格jQuery網格的主要優點是，它們支持圖像或其它具有不同寬度和高度的媒體元素。下面介紹目前市場上10個最迷人的jQuery網格插件-當然和jQuery一樣都是開源和免費的。

1. jQuery Nested

jQuery Nested提供了一個方便的多列網格布局響應，并支持所有設備類型。該jQuery插件可以說是完全無間隙的，在間隙自由度上處理得堪稱完美。
 jQuery Nested在填充表格矩陣中遵循獨特的腳本。首先，創建了一個多列格，然后掃描矩陣間隙，并通過重新排序不同的元素來填充它們。最后-也就是使得該網格無間隙的步驟-調整在底行中與間隙不正確匹配的任何元素。

2. Freewall

Freewall允許創建你想要無論是圖像的網格、嵌套網格或Metro風格的網格布局。它有許多像JavaScript變量一樣可以設置的選項，如gutterX、gutterY、動畫、cellW、cellH等。它還有自定義事件，如onGapFound和onResize，以及自定義方法。

3. Masonry

Masonry這個名字對于一些非常有經驗的設計師來說已經再熟悉不過了。如果你還不了解，Masonry是既適用于jQuery又適用于vanilla JavaScript的級聯網格布局庫。
 該插件以許多流行的WordPress主題為基礎。你甚至不需要把它上傳到你的服務器，就可以輕易直接從CDN鏈接到庫。

Masonry可以說是建立得最好的jQuery網格，這就是為什么它有很多的選項的原因。你可以人容易在Bower或Node Package Manager上安裝它。有了它的幫助你可以實現不同的網格布局，以及設置多個自定義變量、方法和事件。

4. Gridify

Gridify是一個輕量級的JavaScript插件，即可與jQuery又可與純JavaScript一起使用。
 Gridify像Pinterest一樣布局。它支持加載事件，動態計算項目的寬度，并且處理具有非常長的高度的項目，還可通過CSS3的轉換制作動畫。

5. Shapeshift

Shapeshift是一個非常酷的拖拽jQuery網格系統。用戶可以在整個頁面上拖拽元素，元素每一次移動Shapeshift都為它們重組一個新的位置。
 拖動事件在父容器中改變元素的索引位置。這樣Spaceshift就不會使子元素的邏輯索引系統混亂。

Shapeshift在觸摸設備上同樣有效，因為它巧妙地利用了jQuery UITouch Punch應用程序。

翻譯自：轉載請注明本文轉載自慧都控件網