推薦25個(gè)超炫的jQuery網(wǎng)格插件
jQuery 網(wǎng)格插件可以讓你創(chuàng)建各種各樣的表格布局，網(wǎng)格布局是報(bào)紙和雜志中最常見的布局，現(xiàn)在的網(wǎng)站中也很常見，在這篇文章中，我向大家推薦25個(gè)jQuery的網(wǎng)格插件，你可以任意控制網(wǎng)格的行和列，用文本和圖片進(jìn)行填充。我用了頂級(jí)的來形容這個(gè)些插件，我可以肯定你了解它們之后會(huì)覺得很酷。
Gridify是輕量級(jí)的 jQuery 插件，用來創(chuàng)建一個(gè)類似 Pinterest 圖片加載網(wǎng)格插件。支持圖像加載事件，支持窗口縮放事件，支持非常長的高度項(xiàng)，支持動(dòng)態(tài)項(xiàng)寬度，支持動(dòng)畫 (CSS3 transition)。
Freewall是一個(gè)跨瀏覽器和響應(yīng)式的jQuery插件，以幫助您創(chuàng)建多種類型的網(wǎng)格布局：靈活布局，圖像布局，嵌套網(wǎng)格，流體網(wǎng)格，Metro風(fēng)格布局，類似于pinterest的布局...。此外還擁有漂亮的CSS3動(dòng)畫效果和回調(diào)事件。 Freewall是所有功能于一身的解決方案?？梢詾樽烂?，移動(dòng)和平板創(chuàng)建動(dòng)態(tài)的網(wǎng)格布局。
3. Responsive Equal Height Blocks
Responsive Equal Height Blocks是用JavaScript和CSS實(shí)現(xiàn)的。 它實(shí)際上是把一上列表按每一行來展示，通過每一行中最高的條目來設(shè)置和其它條目的位置。
MatchHeight.js能使所有選定元素的高度正好相等。這是一個(gè)更強(qiáng)大的相同高度的插件，正確處理混合填充，邊距，邊框，框的大小，行，組。 它通過在需要的時(shí)候自動(dòng)更新圖像處理和響應(yīng)式布局。
Gridmanager允許你在表格布局中創(chuàng)建、記錄、更新、刪除行和列，創(chuàng)建可編輯區(qū)域的網(wǎng)格布局，每一個(gè)網(wǎng)格可編輯定義大小和數(shù)量以及調(diào)整它的位置。GridManager需要jQuery、jQueryUI和Bootstrap 3.x，可選TinyMCE CKeditor。
S Gallery是一個(gè)jQuery圖片集的插件，它在響應(yīng)式的表格中展示這你的圖片。它的靈感來自于Sony的產(chǎn)品，當(dāng)一個(gè)條目被選中，界面中會(huì)出現(xiàn)選擇前一個(gè)/后一個(gè)的按鈕，你也可以通過點(diǎn)擊其它位置回到整體的表格布局中。
Elastic Columns是一個(gè)輕量級(jí)響應(yīng)式網(wǎng)格布局插件，可以非常容易的按照寬度值來定義網(wǎng)格，監(jiān)測瀏覽器的大小自適應(yīng)網(wǎng)格顯示。
Mason.js是一個(gè)jQuery插件，巧妙地填充了網(wǎng)格的間隙。當(dāng)創(chuàng)建一個(gè)網(wǎng)格時(shí)候，插件就開始計(jì)算這些間隙，然后就使用預(yù)定義的元素或是在網(wǎng)格中復(fù)制的內(nèi)容來填充這些間隙?？梢远x用于元素的大小，列/行的大小，斷點(diǎn)的大小，或者布局是流動(dòng)還是固定的。
RowGrid.js 是個(gè)非常小的，輕量級(jí)的 jQuery 插件，可以對(duì)圖像進(jìn)行直排，而且是響應(yīng)式的，可以無限滾動(dòng)閱覽。
BttrLazyLoading是一款響應(yīng)式圖像延遲加載的 jQuery 插件，允許用戶的 web 應(yīng)用延遲圖片的加載直到圖像滾動(dòng)。BttrLazyLoading 提供四種不同的屏幕大小版本： 手機(jī) (<768px), 平板 (≥768px), 桌面 (≥992px) 和大型的桌面 (≥1200px)。
jqGrid 是一個(gè)用來顯示網(wǎng)格數(shù)據(jù)的jQuery插件，通過使用jqGrid可以輕松實(shí)現(xiàn)前端頁面與后臺(tái)數(shù)據(jù)的ajax異步通信。
Masonry是一款很好用的jquery網(wǎng)頁布局插件，它可以去掉不同高度div之間的空白，讓你的網(wǎng)頁看上去更加的整齊、漂亮！
jQuery拖拽插件Shapeshift，拖放可以重新排列在一個(gè)容器或甚至將在多個(gè)物品使容器變形。拖動(dòng)元素周圍可以改變他們的索引位置在它們的父容器。
Nested是一個(gè)幫助你創(chuàng)建多列的，動(dòng)態(tài)的網(wǎng)格布局，和其它的類似的類庫或者jQuery插件不一樣，它幫助你去掉所有的間隙。使用這個(gè)插件它將幫助你掃描所有的間隙的尺寸，以便重新排序元素，這和其它的類庫或者插件類似，但是Nested最后一步會(huì)幫助你縮放元素，以便消除所有的間距。
Headsup Grid的特點(diǎn)是它可以在不同的平臺(tái)上顯示出不同的風(fēng)格。
Wookmark jQuery plugin 是一個(gè)用來實(shí)現(xiàn)現(xiàn)在很流行的瀑布流的網(wǎng)頁布局效果的 jQuery 插件。
jQuery Waterfall是用li標(biāo)簽制作多列瀑布流布局鼠標(biāo)滾動(dòng)頁面圖片無限加載效果。
Grid-A-Licious 是一個(gè)簡單易用的 jQuery 插件，可用于創(chuàng)建響應(yīng)式瀑布流布局，針對(duì)不同設(shè)備可自動(dòng)適應(yīng)寬度。你可以通過參數(shù)設(shè)置它的寬度以及動(dòng)態(tài)顯示時(shí)的速度、延遲等等，定制性是比較高的。
gridster.js 是一個(gè) jQuery 插件用來構(gòu)建直觀的可拖放的布局，支持多列布局，你還可以動(dòng)態(tài)的添加和刪除表格中的元素。
Gridly是個(gè)網(wǎng)格式的拖放移位jQuery插件，這個(gè)插件交互不錯(cuò)，我們?cè)谕蟿?dòng)的時(shí)候會(huì)顯示一些移動(dòng)動(dòng)畫，效果很好看。
此插件還有其它特色功能，比如關(guān)閉、點(diǎn)擊放大、增加模塊等等。
CollagePlus是一個(gè)jQuery表格插件，你可以定義圖片之間的距離，通過CSS給它們加邊框。
Griddy是一個(gè)輕量級(jí)的插件，但是它能實(shí)現(xiàn)幾乎所有的效果，很多屬性是可選的，比如行數(shù)、行高、列數(shù)、列高、顏色等等……
jqGridView是新的，富客戶端的，基于XML ， Ajax網(wǎng)格插件的jQuery庫。 jqGridView提供專業(yè)的解決方案，代表和編輯表格數(shù)據(jù)在網(wǎng)絡(luò)上。精心設(shè)計(jì)的，具有強(qiáng)大的腳本API的，這可編輯網(wǎng)格是很簡單的DHTML與XML 的配置，并顯示出令人信服的成果與大量數(shù)據(jù)。 jqGridView可以輕松地執(zhí)行好期待（管理通過的CSS ） 。 jqGridView并不平臺(tái)根據(jù)插件，它可用于不同的網(wǎng)絡(luò)編程平臺(tái)，如： ASP技術(shù).NET /的ASP ， PHP中，爪哇島， CGI腳本等jqGridView已高度鮑澤兼容性。
Ingrid在數(shù)據(jù)填充的操作上做了很多的簡化，看上去更接地氣一些。
jui_datagrid 是一個(gè) Ajax 的 jQuery 表格插件，可用于操作表格數(shù)據(jù)，通過簡單和強(qiáng)大的 API 進(jìn)行主題定制、本地化支持等。
via：gbtags
以上25款jQuery網(wǎng)格布局插件，能夠讓開發(fā)者和設(shè)計(jì)師在創(chuàng)建響應(yīng)式布的網(wǎng)格布局時(shí)，同時(shí)擁有迷人的視覺效果，以及一個(gè)兼容所有瀏覽器和手持設(shè)備的響應(yīng)式的外觀。希望你們能夠喜歡！
相關(guān)文章
這篇文章主要介紹了jQuery中odd選擇器的定義和用法,較為詳細(xì)的分析了odd選擇器的具體功能、定義與使用方法,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12
密碼框提示文字的功能還是比較實(shí)用的，下面為大家介紹下使用jquery簡單的實(shí)現(xiàn)下，喜歡的朋友可以參考下2013-08-08
jQuery插件zTree實(shí)現(xiàn)的基本樹與節(jié)點(diǎn)獲取操作示例
這篇文章主要介紹了jQuery插件zTree實(shí)現(xiàn)的基本樹與節(jié)點(diǎn)獲取操作,結(jié)合實(shí)例形式分析了jQuery樹形插件zTree構(gòu)造基本樹與針對(duì)節(jié)點(diǎn)的獲取操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-03-03
jquery 實(shí)現(xiàn)表單驗(yàn)證功能代碼(簡潔)
jquery 實(shí)現(xiàn)表單驗(yàn)證功能代碼,代碼比較簡潔，需要的朋友可以參考下2012-07-07
這篇文章主要介紹了使用js顯示當(dāng)前時(shí)間示例,這里也用到了jquery，讓得把它也要引入到頁面中2014-03-03
EasyUI學(xué)習(xí)之DataGird分頁顯示數(shù)據(jù)
這篇文章主要介紹了EasyUI學(xué)習(xí)之DataGird分頁顯示數(shù)據(jù)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
jQuery中創(chuàng)建實(shí)例與原型繼承揭秘
在普通情況下我們要用原生類、或者自定義類創(chuàng)建實(shí)例要用new運(yùn)算符，使構(gòu)造函數(shù)創(chuàng)建一個(gè)實(shí)例，并且實(shí)例繼承構(gòu)造器prototype上的所有公有方法2011-12-12
jQuery實(shí)現(xiàn)點(diǎn)擊關(guān)注和取消功能
點(diǎn)贊，網(wǎng)絡(luò)用語，表示“贊同”、“喜愛”。今天小編通過實(shí)例代碼給大家分享jQuery實(shí)現(xiàn)點(diǎn)擊關(guān)注和取消功能，需要的朋友參考下吧2017-07-07
JQuery的AJAX實(shí)現(xiàn)文件下載的小例子
JQuery的ajax函數(shù)的返回類型只有xml、text、json、html等類型，沒有“流”類型，所以我們要實(shí)現(xiàn)ajax下載，不能夠使用相應(yīng)的ajax函數(shù)進(jìn)行文件下載。但可以用js生成一個(gè)form，用這個(gè)form提交參數(shù)，并返回“流”類型的數(shù)據(jù)。在實(shí)現(xiàn)過程中，頁面也沒有進(jìn)行刷新2013-05-05
jQuery模擬完美實(shí)現(xiàn)經(jīng)典FLASH導(dǎo)航動(dòng)畫效果【附demo源碼下載】
這篇文章主要介紹了jQuery模擬完美實(shí)現(xiàn)經(jīng)典FLASH導(dǎo)航動(dòng)畫效果,通過jQuery響應(yīng)鼠標(biāo)事件動(dòng)態(tài)操作頁面元素樣式實(shí)現(xiàn)flash切換的效果,非常經(jīng)典實(shí)用,文末還提供了demo源碼供讀者下載學(xué)習(xí)或使用,需要的朋友可以參考下2016-11-11