15款最好的 jQuery 網格佈局外掛

　　如今，大多數網站設計要靠網格系統和佈局，這能夠提供給設計人員一個方便的途徑來組織網頁上的內容。網格的設計最常見於報紙和雜誌的版面，由文字和影像構成的列組成。

　　這篇文章給大家分享精心挑選的15款最佳的 jQuery 網格佈局外掛（jQuery Grid Plugins），它可以幫助你在建立網格佈局專案時大大縮短開發時間。

　　1. Freewall

　　Freewall 是一個跨瀏覽器和響應式的 jQuery 外掛，以幫助您建立多種型別的網格佈局：靈活的佈局，影像佈局，巢狀網格，流體網格，Metro 風格的佈局，Pinterest 風格的佈局。Freewal 是集所有功能於一體的解決方案，用於為桌面，移動和平板電腦裝置建立動態網格佈局。

外掛下載     線上演示

　　2. jQuery Nested

　　這款 jQuery 外掛用於生成無間隙的多列網格佈局。該外掛建立一個所有元素的矩陣，構建一個多列網格並通過重新排序元素來填充間隙。它的用法很簡單，只需通過一個 jQuery 函式繫結容器元素。

外掛下載     線上演示

　　3. Mason.js

　　有很多基於 JavaScript 的解決方案用於建立動態的列布局（類似 Pinterest 風格）。這些方案都很好，但是實現的網格會包含間隙或粗糙的邊緣。Mason.js 這款 jQuery 外掛旨在填補這些空白。網格被建立時，這款外掛在會計算出存在的間距，並使用預定義的元素或通過複製網格中的內容填充它們。

外掛下載     線上演示

　　4. jQuery.Shapeshift

　　jQuery.Shapeshift 是另外一個網格佈局外掛，讓專案可以拖放佈局（使用 jQuery UI 實現）。拖放不會對網格佈局產生負面影響，因為會在需要的時候自動填補空白。它也適用於觸控裝置和響應佈局。該外掛還有許多選項，可以設定頁邊距，啟用/禁用拖放，自定義動畫效果等等。

外掛下載     線上演示

　　5. S Gallery

　　S Gallery 是一款效果精美的 jQuery 圖片庫外掛，在一個響應式的網格中顯示影像。它的靈感來自於索尼的產品頁面（使用 Flash 製作的），一旦專案被點選就會重點突出，可以通過上一個、下一個按鈕或通過鍵盤瀏覽其它圖片。

外掛下載     線上演示

　　6. Wookmark jQuery Plugin

　　動態列的網格佈局如此受歡迎，不僅因為它被 Pinterest 使用，也因為它是使用不同大小顯示內容的一個好方法。Wookmark 這款 jQuery 外掛用於建立這樣的佈局，能夠在每個瀏覽器都工作良好。

外掛下載     線上演示

　　7. Grid-A-Licious

　　Grid-A-Licious 是林外一款實現網格佈局的 jQuery 外掛，使我們能夠輕鬆地建立類似 Pinterest 的浮動網格佈局。這款外掛和其它的不同之處在於提供了一個完全響應解決方案，無論什麼樣的螢幕大小或裝置，網格都能自動適應，因為它是浮動的（沒有使用絕對定位）和流體。

外掛下載     線上演示

　　8. jPhotoGrid

　　jPhotoGrid 用於把一組影像和字幕變成可以擴充套件和縮放的照片網格。訣竅是通過浮動列表項來佈局網格，當你點選縮圖的時候，可以放大單個影像，關閉時會將其返回到原來的地方。

外掛下載     線上演示

　　9. Gridster

　　Gridster 是一款令人印象深刻的 jQuery 外掛，用於開發類似 iGoogle 的多列網格，可以通過拖放重新排序，建立直觀的跨越多個列的拖動佈局元素。

外掛下載     線上演示

　　10. Photoset Grid

　　Photoset Grid 是一款簡單的 jQuery 外掛，可以用於把圖片排布成一個靈活的網格。最初，這款外掛是為 Tumblr 主題建立的，用於實現響應式的圖片網格佈局。

外掛下載     線上演示

　　11. Flex

　　Flex 是一個用於實現流體網格動畫的 jQuery 外掛。當你將滑鼠放懸停在圖片集上面的時候，圖片或擴大。Flex 的靈感來自於 Adidas 的主頁。

外掛下載     線上演示

　　12. Freetile

　　Freetile 能夠幫助你組織網頁內容，形成動態的、響應式的佈局。它可以應用到一個容器元素，它會嘗試安排它的子元素，最佳利用螢幕的空間，通過“包裝”他們形成緊湊的佈局。

外掛下載     線上演示

　　13. Griddy

　　Griddy是一個輕量的 jQuery 外掛，能夠在任何元素之上建立簡單的，自定義的網格佈局。它也可以自動根據行/列間隔空間的數量計算行高和列寬。可設定的選項包括：行，行高，列高，列寬，顏色和透明度等。

外掛下載     線上演示

　　14. jSquares

　　jSquares 這款 jQuery 外掛用於在滑鼠懸停的時候彈出遮罩層顯示影像和說明。它和 www.ted.com 上的影像網格基本相同。有一些引數可以在呼叫 jSquares 的時候加入，例如標題大小，影像的不透明度，切換速度等。

外掛下載     線上演示

　　15. jqGrid

　　jqGrid 這款網格外掛有很多特色功能。由於網格是一個客戶端解決方案，資料載入使用的是 Ajax 回撥函式，因此它可以用於任何伺服器端語言，如 ASP，PHP，ASP.NET，JSP 等等。

外掛下載     線上演示