15 個最好的 jQuery 網格布局插件

大多數網站設計要靠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，啟用/禁用拖曳，自定義動畫等等。

Source  

5. jQuery Nested

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

Source  

6. Wookmark jQuery Plugin

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

Source  

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

Source  

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等。它有一個聰明的特性——子網格，可以在調用主列的時候顯示一個子網格。