現(xiàn)如今，網(wǎng)站開發(fā)設(shè)計(jì)的需求會要求自動適應(yīng)所有移動設(shè)備，即響應(yīng)式網(wǎng)站: 在開發(fā)網(wǎng)站時(shí)必須考慮對平板設(shè)備融合 fluid（流）和自適應(yīng)性特點(diǎn)。

　　大多數(shù)網(wǎng)站設(shè)計(jì)要靠margins, guides, rows and columns等網(wǎng)格系統(tǒng)和布局來在網(wǎng)頁上組織內(nèi)容。網(wǎng)格設(shè)計(jì)常見于報(bào)紙和雜志中的文字圖像排版設(shè)計(jì)。

　　可以創(chuàng)建網(wǎng)格布局的數(shù)量幾乎是無限的，并且能夠用無數(shù)種方式排布。比如：在等間距的兩列，三列或者四列網(wǎng)格頂端有一個(gè)橫跨的header，或者一整頁的有著同樣外觀和感覺的方格。

　　有一些很好的JQuery網(wǎng)格布局插件能夠大幅的縮短開發(fā)時(shí)間，如果你在你下一個(gè)項(xiàng)目中使用的話。這些網(wǎng)格插件能夠優(yōu)化瀑布流，使列的大小可調(diào)，滾動數(shù)據(jù)以匹配header，同樣也可以添加數(shù)據(jù)網(wǎng)格，以及針對網(wǎng)格的一些動作比如：重新調(diào)整列的大小，分頁，排序，行和列的樣式等等。

　　下面是15款jQuery網(wǎng)格布局插件，能夠讓開發(fā)者和設(shè)計(jì)師在創(chuàng)建響應(yīng)式布的網(wǎng)格布局時(shí)，同時(shí)擁有迷人的視覺效果，以及一個(gè)兼容所有瀏覽器和手持設(shè)備的響應(yīng)式的外觀。希望你們能夠喜歡！

　　1.自由墻?

　　自由墻是一個(gè)跨瀏覽器的響應(yīng)式j(luò)Query插件，它可以幫助你創(chuàng)建很多不同的網(wǎng)格布局：靈活布局，圖片布局，網(wǎng)格，流體網(wǎng)格，metro風(fēng)格布局還有用CSS3實(shí)現(xiàn)的動畫效果和回調(diào)事件的瀑布流布局。自由墻是一站式的解決方案來在桌面，移動和平板上動態(tài)創(chuàng)建網(wǎng)格布局。

　　它是基于容器的寬(或高)以及單元的寬(或高)，同時(shí)它會創(chuàng)建一個(gè)虛擬的矩陣。掃描矩陣的每一個(gè)單元，找到空閑單元并讓其為空白區(qū)域，之后將一個(gè)塊元素插入。若果沒有塊可以匹配的話，它將縮放塊來適應(yīng)(這是選項(xiàng)之一)

　　來源

　　2. S Gallery

　　S Gallery 是一款 jQuery 圖片畫廊插件 ，將圖片顯示在響應(yīng)式網(wǎng)格。它的靈感來自于Sony’s產(chǎn)品頁畫廊 (Flash實(shí)現(xiàn)) 并完全實(shí)現(xiàn)了它的功能。當(dāng)一個(gè)項(xiàng)目獲得焦點(diǎn)或被點(diǎn)擊時(shí), 可以使用 prev-next 按鈕 或使用鍵盤來瀏覽其他操作。 單擊后會返回網(wǎng)格視圖并有一個(gè)全屏選項(xiàng)(使用HTML5全屏API).

　　來源

　　3. Mason.js

　　創(chuàng)建一個(gè)動態(tài)列的網(wǎng)格布局（比如Pinterest）有許多javascript方案。雖然大多數(shù)都很棒，但有時(shí)，這些網(wǎng)格會含有縫隙或者鋸齒邊緣。Mason.js是一款致力于通過智能填充空隙，力圖表現(xiàn)完美網(wǎng)格的jQuery插件。一個(gè)網(wǎng)格被創(chuàng)建出來，這款插件會計(jì)算空隙的位置并使用預(yù)定義的元素或者重復(fù)內(nèi)容填充空隙。元素的大小，列/行的大小，斷點(diǎn)以及布局是流式還是固定都是可以被重新定義的。

　　Source

　　4.jQuery.Shapeshift

　　有許多jQuery的插件可以創(chuàng)建一個(gè)照片分享樣式的動態(tài)網(wǎng)格布局。jQuery.Shapeshift是一個(gè)正是這類插件的強(qiáng)大替代品，通過一個(gè)觸摸動作，這些圖片可以拖曳（需要使用jQuery UI）。拖曳可以影響網(wǎng)格布局，就像網(wǎng)格在需要的時(shí)候，會自動去填充空隙一樣。這同樣在觸摸設(shè)備和響應(yīng)式布局上有效。這個(gè)插件有許多靈活可變的參數(shù)，比如設(shè)置margin，啟用/禁用拖曳，自定義動畫等等。

　　來源??

　　5. jQuery Nested

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

　　來源

　　6. Wookmark jQuery Plugin

　　擁有動態(tài)列的網(wǎng)格布局如此流行，并不僅僅是因?yàn)樗鼈儽挥糜趫D片分享的網(wǎng)站，更是因?yàn)閷τ诓煌笮〉膬?nèi)容顯示來說，這是一個(gè)非常棒的方式。Wookmark，Pinterest的替代品，發(fā)布了一個(gè)可以創(chuàng)建那樣布局的jQuery插件，兼容所有的瀏覽器。目前，這個(gè)插件只提供了少量的可選項(xiàng)：容器元素，offset（垂直/豎直距離）和元素的寬度——就這些。在初始化時(shí)，它會自己獲取窗口的大小并自動排布網(wǎng)格（當(dāng)然，它也是響應(yīng)式的布局）。

　　來源

　　7. Grid-A-Licious

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

　　來源

　　8. jPhotoGrid

　　jPhotoGrid只需要圖像和字幕的簡單列表，就可以將其變成了可以瀏覽和放大照片的網(wǎng)格。這個(gè)插件幾乎所有的樣式都是靠CSS完成的。訣竅是通過浮動的列表項(xiàng)來對網(wǎng)格進(jìn)行布局。而插件會做的第一件事，就是將這些都轉(zhuǎn)換成絕對定位。這就是為什么這個(gè)插件可以放大單個(gè)圖像，然后將其返回到原來的地方。

　　來源

　　9. Gridster

?

　　Gridster是一個(gè)令人印象深刻的jQuery插件，是為了開發(fā)出一個(gè)類iGoogle的多列網(wǎng)格，可以拖動n行刪除并重新排序。該插件只需要jQuery（不用jQuery UI），可以將任何給定的HTML構(gòu)造成網(wǎng)格的部件。而且，不局限于最初加載的元素，它還可以動態(tài)的添加新元素和刪除現(xiàn)有的元素。

　　來源

　　10. Photoset Grid

　　PhotosetGrid是一個(gè)簡單的jQuery插件，用來將圖片基于Tumblr的圖片集功能，整理成一個(gè)靈活的網(wǎng)格。插件最初用于Style Hatch Tumblr主題，以此來在一個(gè)響應(yīng)式的布局中顯示圖片集，但他們后來擴(kuò)展了它，并為我們發(fā)布了一個(gè)jQuery插件。

　　來源??

　　11. Flex

　　Flex是一個(gè)流式非對稱的網(wǎng)格動畫jQuery插件。你可以將鼠標(biāo)放在瓦片上，就能看到它們漸漸擴(kuò)大。 Flex是一個(gè)想法，靈感來自于Adidas.com的flash主頁。

　　來源??

　　12. Freetile

?

　　Freetile是一個(gè)用來在一個(gè)高效，動態(tài)響應(yīng)和布局網(wǎng)頁中組織內(nèi)容的jQuery插件。它可以應(yīng)用到一個(gè)容器元素，通過將它們“包裝”在一個(gè)緊湊的編排中,它會嘗試將其子元素安排在一個(gè)可以對空間進(jìn)行最優(yōu)化利用的布局中。

　　來源

　　13. Griddy

　　Griddy是一個(gè)小型的jQuery插件，用來在任何元素之上創(chuàng)建的簡單的，自定義的懸浮網(wǎng)格。它也可以根據(jù)行/列和裝訂線空間數(shù)量自動計(jì)算行高和列寬。它提供了幾個(gè)選項(xiàng)，包括：行，行高，行間距，列，列高，列寬，顏色和透明度。

　　來源??

　　14. jSquares

　　jSquares是一個(gè)用來彈出懸停圖像和說明的jQuery插件。它基本上和在www.ted.com上找到的圖像表格相同。調(diào)用jSquares時(shí)，可以加入一些參數(shù)，如字幕大小，圖像的透明度，切換速度等。它就在IE6+，FF3+，Safari 3以及Opera10上工作起來很有魅力。

　　來源

　　15. jqGrid

　　jqGrid是是一個(gè)帶有神器功能的AjaxedJQuery網(wǎng)格插件。由于網(wǎng)格是一個(gè)使用Ajax回調(diào)函數(shù)加載數(shù)據(jù)的客戶端解決方案，它可以用于任何服務(wù)器端語言，如ASP，PHP，ASP.NET，JSP等。它有一個(gè)聰明的特性——子網(wǎng)格，可以在調(diào)用主列的時(shí)候顯示一個(gè)子網(wǎng)格。

總結(jié)

以上是生活随笔為你收集整理的15 个最佳的 jQuery 表格插件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。