15 個最佳的 jQuery 表格外掛

　　現如今，網站開發設計的需求會要求自動適應所有移動裝置，即響應式網站: 在開發網站時必須考慮對平板裝置融合 fluid（流）和自適應性特點。

　　大多數網站設計要靠margins, guides, rows and columns等網格系統和佈局來在網頁上組織內容。網格設計常見於報紙和雜誌中的文字影像排版設計。

　　可以建立網格佈局的數量幾乎是無限的，並且能夠用無數種方式排布。比如：在等間距的兩列，三列或者四列網格頂端有一個橫跨的header，或者一整頁的有著同樣外觀和感覺的方格。

　　有一些很好的JQuery網格佈局外掛能夠大幅的縮短開發時間，如果你在你下一個專案中使用的話。這些網格外掛能夠優化瀑布流，使列的大小可調，滾動資料以匹配header，同樣也可以新增資料網格，以及針對網格的一些動作比如：重新調整列的大小，分頁，排序，行和列的樣式等等。

　　下面是15款jQuery網格佈局外掛，能夠讓開發者和設計師在建立響應式布的網格佈局時，同時擁有迷人的視覺效果，以及一個相容所有瀏覽器和手持裝置的響應式的外觀。希望你們能夠喜歡！

　　1.自由牆 

　　自由牆是一個跨瀏覽器的響應式jQuery外掛，它可以幫助你建立很多不同的網格佈局：靈活佈局，圖片佈局，網格，流體網格，metro風格佈局還有用CSS3實現的動畫效果和回撥事件的瀑布流佈局。自由牆是一站式的解決方案來在桌面，移動和平板上動態建立網格佈局。

　　它是基於容器的寬(或高)以及單元的寬(或高)，同時它會建立一個虛擬的矩陣。掃描矩陣的每一個單元，找到空閒單元並讓其為空白區域，之後將一個塊元素插入。若果沒有塊可以匹配的話，它將縮放塊來適應(這是選項之一)

　　來源

　　2. S Gallery

　　S Gallery 是一款 jQuery 圖片畫廊外掛 ，將圖片顯示在響應式網格。它的靈感來自於Sony’s產品頁畫廊 (Flash實現) 並完全實現了它的功能。當一個專案獲得焦點或被點選時, 可以使用 prev-next 按鈕 或使用鍵盤來瀏覽其他操作。 單擊後會返回網格檢視並有一個全屏選項(使用HTML5全屏API).

　　來源

　　3. Mason.js

　　建立一個動態列的網格佈局（比如Pinterest）有許多javascript方案。雖然大多數都很棒，但有時，這些網格會含有縫隙或者鋸齒邊緣。Mason.js是一款致力於通過智慧填充空隙，力圖表現完美網格的jQuery外掛。一個網格被建立出來，這款外掛會計算空隙的位置並使用預定義的元素或者重複內容填充空隙。元素的大小，列/行的大小，斷點以及佈局是流式還是固定都是可以被重新定義的。

　　Source

　　4.jQuery.Shapeshift

　　有許多jQuery的外掛可以建立一個照片分享樣式的動態網格佈局。jQuery.Shapeshift是一個正是這類外掛的強大替代品，通過一個觸控動作，這些圖片可以拖曳（需要使用jQuery UI）。拖曳可以影響網格佈局，就像網格在需要的時候，會自動去填充空隙一樣。這同樣在觸控裝置和響應式佈局上有效。這個外掛有許多靈活可變的引數，比如設定margin，啟用/禁用拖曳，自定義動畫等等。

　　來源  

　　5. jQuery Nested

　　Nested是一款可以生成多列沒有空隙的網格佈局的jQuery外掛。這個外掛為所有的元素建立一個矩陣，建立一個多列的網格，並嘗試用記錄的元素來填充所有空隙。其實有很多解決方案能夠達到同樣的效果。但是，Nested提供了一個小的動作：它能夠重新調整網格底部的任何元素，以確保沒有縫隙。它的用法也很簡單，只需要給一個jQuery的函式指定容器元素就行。並且，提供了多種可選引數方便使用者定製，比如啟用/禁用動畫，最少列數等

　　來源

　　6. Wookmark jQuery Plugin

　　擁有動態列的網格佈局如此流行，並不僅僅是因為它們被用於圖片分享的網站，更是因為對於不同大小的內容顯示來說，這是一個非常棒的方式。Wookmark，Pinterest的替代品，釋出了一個可以建立那樣佈局的jQuery外掛，相容所有的瀏覽器。目前，這個外掛只提供了少量的可選項：容器元素，offset（垂直/豎直距離）和元素的寬度——就這些。在初始化時，它會自己獲取視窗的大小並自動排佈網格（當然，它也是響應式的佈局）。

　　來源

　　7. Grid-A-Licious

　　Grid-A-Licious是一個jQuery外掛，可以讓你很容易的建立類似Pinterest的浮動表格佈局。當然也有其他的外掛能夠完成這個功能，但Grid-A-Licious提供了更完善的響應式解決方案。不管什麼尺寸的螢幕，還是什麼裝置，表格表現得都很完美，它都能實現浮動而不使用絕對定位。外掛提供了自定義寬度、間隔和動畫（速度，過渡時間，效果等等）的選項，並且它支援在表格前或後插入新專案，這對於動態而已來說是非常有用的。

　　來源

　　8. jPhotoGrid

　　jPhotoGrid只需要影像和字幕的簡單列表，就可以將其變成了可以瀏覽和放大照片的網格。這個外掛幾乎所有的樣式都是靠CSS完成的。訣竅是通過浮動的列表項來對網格進行佈局。而外掛會做的第一件事，就是將這些都轉換成絕對定位。這就是為什麼這個外掛可以放大單個影像，然後將其返回到原來的地方。

　　來源

　　9. Gridster

 

　　Gridster是一個令人印象深刻的jQuery外掛，是為了開發出一個類iGoogle的多列網格，可以拖動n行刪除並重新排序。該外掛只需要jQuery（不用jQuery UI），可以將任何給定的HTML構造成網格的部件。而且，不侷限於最初載入的元素，它還可以動態的新增新元素和刪除現有的元素。

　　來源

　　10. Photoset Grid

　　PhotosetGrid是一個簡單的jQuery外掛，用來將圖片基於Tumblr的圖片集功能，整理成一個靈活的網格。外掛最初用於Style Hatch Tumblr主題，以此來在一個響應式的佈局中顯示圖片集，但他們後來擴充套件了它，併為我們釋出了一個jQuery外掛。

　　來源  

　　11. Flex

　　Flex是一個流式非對稱的網格動畫jQuery外掛。你可以將滑鼠放在瓦片上，就能看到它們漸漸擴大。 Flex是一個想法，靈感來自於Adidas.com的flash主頁。

　　來源  

　　12. Freetile

 

　　Freetile是一個用來在一個高效，動態響應和佈局網頁中組織內容的jQuery外掛。它可以應用到一個容器元素，通過將它們“包裝”在一個緊湊的編排中,它會嘗試將其子元素安排在一個可以對空間進行最優化利用的佈局中。

　　來源

　　13. Griddy

　　Griddy是一個小型的jQuery外掛，用來在任何元素之上建立的簡單的，自定義的懸浮網格。它也可以根據行/列和裝訂線空間數量自動計算行高和列寬。它提供了幾個選項，包括：行，行高，行間距，列，列高，列寬，顏色和透明度。

　　來源  

　　14. jSquares

　　jSquares是一個用來彈出懸停影像和說明的jQuery外掛。它基本上和在www.ted.com上找到的影像表格相同。呼叫jSquares時，可以加入一些引數，如字幕大小，影像的透明度，切換速度等。它就在IE6+，FF3+，Safari 3以及Opera10上工作起來很有魅力。

　　來源

　　15. jqGrid

　　jqGrid是是一個帶有神器功能的AjaxedJQuery網格外掛。由於網格是一個使用Ajax回撥函式載入資料的客戶端解決方案，它可以用於任何伺服器端語言，如ASP，PHP，ASP.NET，JSP等。它有一個聰明的特性——子網格，可以在呼叫主列的時候顯示一個子網格。

　　來源

　　原文地址：http://codegeekz.com/jquery-grids/