天天看點

jQuery 網格布局插件

如今,大多數網站設計要靠網格系統和布局,這能夠提供給設計人員一個友善的途徑來組織網頁上的内容。網格的設計最常見于報紙和雜志的版面,由文字和圖像構成的列組成。

  這篇文章給大家分享精心挑選的15款最佳的 jQuery 網格布局插件(jQuery Grid Plugins),它可以幫助你在建立網格布局項目時大大縮短開發時間。

  1. Freewall

  Freewall 是一個跨浏覽器和響應式的 jQuery 插件,以幫助您建立多種類型的網格布局:靈活的布局,圖像布局,嵌套網格,流體網格,Metro 風格的布局,Pinterest 風格的布局。Freewal 是集所有功能于一體的解決方案,用于為桌面,移動和平闆電腦裝置建立動态網格布局。

插件下載下傳​     線上示範

  2. jQuery Nested

  這款 jQuery 插件用于生成無間隙的多列網格布局。該插件建立一個所有元素的矩陣,建構一個多列網格并通過重新排序元素來填充間隙。它的用法很簡單,隻需通過一個 jQuery 函數綁定容器元素。

jQuery 網格布局插件

插件下載下傳​     線上示範

  3. Mason.js

  有很多基于 JavaScript 的解決方案用于建立動态的列布局(類似 Pinterest 風格)。這些方案都很好,但是實作的網格會包含間隙或粗糙的邊緣。Mason.js 這款 jQuery 插件旨在填補這些空白。網格被建立時,這款插件在會計算出存在的間距,并使用預定義的元素或通過複制網格中的内容填充它們。

jQuery 網格布局插件

插件下載下傳​     線上示範

  4. jQuery.Shapeshift

  jQuery.Shapeshift 是另外一個網格布局插件,讓項目可以拖放布局(使用 jQuery UI 實作)。拖放不會對網格布局産生負面影響,因為會在需要的時候自動填補空白。它也适用于觸摸裝置和響應布局。該插件還有許多選項,可以設定頁邊距,啟用/禁用拖放,自定義動畫效果等等。

jQuery 網格布局插件

插件下載下傳​     線上示範

  5. S Gallery

  S Gallery 是一款效果精美的 jQuery 圖檔庫插件,在一個響應式的網格中顯示圖像。它的靈感來自于索尼的産品頁面(使用 Flash 制作的),一旦項目被點選就會重點突出,可以通過上一個、下一個按鈕或通過鍵盤浏覽其它圖檔。

插件下載下傳​     線上示範

  6. Wookmark jQuery Plugin

  動态列的網格布局如此受歡迎,不僅因為它被 Pinterest 使用,也因為它是使用不同大小顯示内容的一個好方法。Wookmark 這款 jQuery 插件用于建立這樣的布局,能夠在每個浏覽器都工作良好。

插件下載下傳​     線上示範

  7. Grid-A-Licious

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

jQuery 網格布局插件

插件下載下傳​     線上示範

  8. jPhotoGrid

  jPhotoGrid 用于把一組圖像和字幕變成可以擴充和縮放的照片網格。訣竅是通過浮動清單項來布局網格,當你點選縮略圖的時候,可以放大單個圖像,關閉時會将其傳回到原來的地方。

插件下載下傳​     線上示範

  9. Gridster

  Gridster 是一款令人印象深刻的 jQuery 插件,用于開發類似 iGoogle 的多列網格,可以通過拖放重新排序,建立直覺的跨越多個列的拖動布局元素。

jQuery 網格布局插件

插件下載下傳​     線上示範

  10. Photoset Grid

  Photoset Grid 是一款簡單的 jQuery 插件,可以用于把圖檔排布成一個靈活的網格。最初,這款插件是為 Tumblr 主題建立的,用于實作響應式的圖檔網格布局。

插件下載下傳​     線上示範

  11. Flex

  Flex 是一個用于實作流體網格動畫的 jQuery 插件。當你将滑鼠放懸停在圖檔集上面的時候,圖檔或擴大。Flex 的靈感來自于 Adidas 的首頁。

插件下載下傳​     線上示範

  12. Freetile

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

插件下載下傳​     線上示範

  13. Griddy

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

jQuery 網格布局插件

插件下載下傳​     線上示範

  14. jSquares

  jSquares 這款 jQuery 插件用于在滑鼠懸停的時候彈出遮罩層顯示圖像和說明。它和 www.ted.com 上的圖像網格基本相同。有一些參數可以在調用 jSquares 的時候加入,例如标題大小,圖像的不透明度,切換速度等。

jQuery 網格布局插件

插件下載下傳​     線上示範

  15. jqGrid

  jqGrid 這款網格插件有很多特色功能。由于網格是一個用戶端解決方案,資料加載使用的是 Ajax 回調函數,是以它可以用于任何伺服器端語言,如 ASP,PHP,ASP.NET,JSP 等等。

jQuery 網格布局插件

繼續閱讀