如今,大多數網站設計要靠網格系統和布局,這能夠提供給設計人員一個友善的途徑來組織網頁上的内容。網格的設計最常見于報紙和雜志的版面,由文字和圖像構成的列組成。
這篇文章給大家分享精心挑選的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 等等。