如今，絕大多數(shù)網(wǎng)站都要依靠網(wǎng)格來進(jìn)行布局，擁有一些好的Grid網(wǎng)格布局插件能大大地節(jié)約開發(fā)時(shí)間，還能在滿足響應(yīng)式布局的同時(shí)擁有迷人的外觀。接下來，小編帶大家來認(rèn)識(shí)15款非常棒的響應(yīng)式j(luò)Query Grid網(wǎng)格插件，希望大家喜歡。>>> 查看ASP.NET網(wǎng)格控件

Freewall

Freewall是一款跨平臺(tái)的、響應(yīng)式j(luò)Query插件，可幫助你創(chuàng)建多種類型的網(wǎng)格布局：靈活布局、圖像布局、嵌套網(wǎng)格、流體網(wǎng)格、Metro風(fēng)格布局以用CSS3實(shí)現(xiàn)的動(dòng)畫效果和回調(diào)事件的瀑布流布局。Freewall是一套功能全面的解決方案，可創(chuàng)建動(dòng)態(tài)的桌面網(wǎng)格布局、移動(dòng)和平板電腦布局。

S Gallery

S Gallery是一個(gè)jQuery圖片庫插件，用于顯示響應(yīng)式網(wǎng)格中的圖片。S Gallery的設(shè)計(jì)靈感來自于Sony的產(chǎn)品畫廊，并模仿了其功能。

Mason.js

有許多javascript方案都可用于創(chuàng)建動(dòng)態(tài)網(wǎng)格布局。盡管大多數(shù)都很好，但是有些網(wǎng)格有縫隙或者鋸齒邊緣。Mason.js是一款jQuery插件，巧妙地填補(bǔ)了縫隙，Grid網(wǎng)格顯得非常完美。

jQuery.Shapeshift

用于創(chuàng)建類似于Pinterest動(dòng)態(tài)網(wǎng)格布局的jQuery插件非常多。jQuery.Shapeshift就是其中一個(gè)強(qiáng)有力的代表。通過一個(gè)觸摸動(dòng)作，這些圖片可以拖曳（需要使用jQuery UI）。拖曳可以影響網(wǎng)格布局，就像網(wǎng)格在需要的時(shí)候，會(huì)自動(dòng)去填充空隙一樣。這同樣在觸摸設(shè)備和響應(yīng)式布局上有效。

jQuery Nested

Nested是一個(gè)用于創(chuàng)建多列網(wǎng)格布局的jQuery插件。該插件為所有元素創(chuàng)建一個(gè)矩陣，建立一個(gè)多列網(wǎng)格，并試圖通過重新排序元素，以填補(bǔ)任何空白。雖然也有很多其他的方法可以達(dá)到類似的效果，但是Nested應(yīng)用了一個(gè)小的動(dòng)作：調(diào)整網(wǎng)格底部的任意元素以保證布局無縫隙。

Wookmark jQuery Plugin

動(dòng)態(tài)列網(wǎng)格布局如此受歡迎，不僅是因?yàn)镻interest使用它進(jìn)行圖片分享，而是因?yàn)樗秋@示不同大小的內(nèi)容的最好方式。

Grid-A-Licious

Grid-A-Licious是一款能輕松創(chuàng)建類似Pinterest的浮動(dòng)網(wǎng)格布局的jQuery插件。雖然，也有其他插件可以實(shí)現(xiàn)類似功能，但是Grid-A-Licious提供了一個(gè)更完美的響應(yīng)式解決方案。無論在何種屏幕大小或設(shè)備上，Grid-A-Licious的表格表現(xiàn)皆完美。

jPhotoGrid

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

Gridster

Gridster是一款令人印象深刻的jQuery插件，可用于開發(fā)類似于iGoogle的多列網(wǎng)格，可以拖動(dòng)n行刪除并重新排序。該插件僅需 jQuery （無需 jQuery UI）并且可以將任何給定的HTML結(jié)果轉(zhuǎn)換成網(wǎng)格部件。

Photoset Grid

Photoset Grid 是一款簡(jiǎn)單的 jQuery 插件,可以用于把圖片排布成一個(gè)靈活的網(wǎng)格。最初,這款插件是為 Tumblr 主題創(chuàng)建的，用于實(shí)現(xiàn)響應(yīng)式的圖片網(wǎng)格布局。

Flex

Flex是一款流式非對(duì)稱的網(wǎng)格動(dòng)畫jQuery插件。你可以將鼠標(biāo)懸停在瓦片上，就能看到它們漸漸擴(kuò)大。

Freetile

Freetile是一個(gè)jQuery插件,用于組織網(wǎng)頁內(nèi)容成一個(gè)高效的、動(dòng)態(tài)的響應(yīng)的布局。它可以應(yīng)用到一個(gè)容器元素，它會(huì)嘗試安排它的子元素，最佳利用屏幕的空間，通過“包裝”他們形成緊湊的布局。

Griddy

Griddy是一款小巧、靈活的JQuery插件，能夠在任何元素之上創(chuàng)建簡(jiǎn)單的，自定義的網(wǎng)格布局。Griddy還可以根據(jù)行/列間隔空間的數(shù)量自動(dòng)計(jì)算行高、列寬。設(shè)置的選項(xiàng)包括：行，行高，列高，列寬，顏色和透明度等。

jSquares

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

jqGrid

jqGrid是一款A(yù)jaxedJQuery網(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)格。

擴(kuò)展閱讀：

• 分享30個(gè)最流行的jQuery插件（上）
• 分享30個(gè)最流行的jQuery插件（下）
• Web開發(fā)人員應(yīng)當(dāng)充分使用的10大jQuery插件
• 20個(gè)最炫HTML5，jQuery和CSS3下拉菜單制作教程（附示例/源碼）