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 等等。
相關文章
- Vue木桶佈局外掛Vue
- 15款最好的 jQuery Modal(模態視窗)外掛jQuery
- Isotope-jQuery神奇的分類過濾和排序佈局外掛jQuery排序
- 推薦15款最佳的 jQuery 分佈引導外掛jQuery
- 12款最好的 jQuery 模態視窗外掛jQuery
- 2014年25款最好的jQuery外掛jQuery
- 給開發者準備的 10 款最好的 jQuery 日曆外掛jQuery
- 15款最好的網站音樂播放器網站播放器
- 推薦15款最佳的 jQuery 分步引導外掛jQuery
- 為開發者準備的15 款Tooltip工具提示jQuery外掛jQuery
- 10個最好的 jQuery 視訊外掛jQuery
- 15 個用於佈局和 UI 增強的 jQuery 外掛UIjQuery
- 移動開發必備!15款jQuery Mobile外掛移動開發jQuery
- 8 個最好的 jQuery 樹形 Tree 外掛jQuery
- 分享10個最好的jQuery表單外掛jQuery
- 15款優秀jQuery 圖片展示外掛(slideshow)整理jQueryIDE
- 15 個最新的 jQuery外掛jQuery
- 分享10款最新的jQuery外掛jQuery
- 15 個最佳的 jQuery 表格外掛jQuery
- 15個CSS網格佈局線上生成器網站CSS網站
- 25款頂級的jQuery表格外掛jQuery
- 10款jQuery文字高亮外掛jQuery
- 推薦15款最好的 Twitter Bootstrap 開發工具boot
- 應用於網站導航中的 15 個 jQuery 外掛網站jQuery
- jQuery Mobile仿360首頁,jQuery Mobile網格佈局,jQuery Mobile網址大全,HTML5仿360首頁jQueryHTML
- 13款精彩實用的最新jQuery外掛jQuery
- 5 款最新的 jQuery 圖片裁剪外掛jQuery
- Web開發者必備的20款 jQuery 外掛WebjQuery
- 推薦15 款最好的 Bug跟蹤應用程式
- 15款最好用的思維導圖(心智圖 )工具
- 8款最佳jQuery外掛推薦jQuery
- 15個超級實用的jQuery外掛jQuery
- CSS網格佈局CSS
- jQuery網格外掛 ParamQueryjQueryMQ
- 20款jQuery 的音訊和視訊外掛jQuery音訊
- 10款最新流行的 jQuery 外掛 值得你收藏jQuery
- 27款很實用的 jQuery 表單外掛jQuery
- 7款最好用的網路監控工具