jQuery 網格插件可以讓你創建各種各樣的表格佈局,網格佈局是報紙和雜誌中最常見的佈局,現在的網站中也很常見,在這篇文章中,我向大家推薦25個jQuery的網格插件,你可以任意控制網格的行和列,用文字和圖片進行填充。我用了頂級的來形容這個些插件,我可以肯定你了解它們之後會覺得很酷。
Gridify是輕量級的 jQuery 插件,用來創建一個類似 Pinterest 圖片加載網格插件。支援圖片載入事件,支援視窗縮放事件,支援非常長的高度項,支援動態項寬度,支援動畫 (CSS3 transition)。
Freewall是一個跨瀏覽器和響應式的jQuery插件,以幫助您創建多種類型的網格佈局:靈活佈局,圖像佈局,嵌套網格,流體網格,Metro風格佈局,類似於pinterest的佈局...。另外還有漂亮的CSS3動畫效果和回呼事件。 Freewall是所有功能於一身的解決方案。可以為桌面,行動和平板建立動態的網格佈局。
3. Responsive Equal Height Blocks
Responsive Equal Height Blocks是用JavaScript和CSS實現的。 它實際上是把一上列表按每一行來展示,透過每一行中最高的條目來設定和其它條目的位置。
MatchHeight.js能讓所有選取元素的高度剛好相等。這是一個更強大的相同高度的插件,正確處理混合填充,邊距,邊框,框的大小,行,組。 它透過在需要的時候自動更新影像處理和響應式佈局。
Gridmanager允許你在表格佈局中建立、記錄、更新、刪除行和列,建立可編輯區域的網格佈局,每一個網格可編輯定義大小和數量以及調整它的位置。 GridManager需要jQuery、jQueryUI和Bootstrap 3.x,可選TinyMCE CKeditor。
S Gallery是一個jQuery圖片集的插件,它在響應式的表格中展示這你的圖片。它的靈感來自於Sony的產品,當一個條目被選中,介面中會出現選擇前一個/後一個的按鈕,你也可以透過點擊其它位置回到整體的表格佈局中。
Elastic Columns是一個輕量級響應式網格佈局插件,可以非常容易的按照寬度值來定義網格,監測瀏覽器的大小自適應網格顯示。
Mason.js是一個jQuery插件,巧妙地填滿了網格的間隙。當建立一個網格時候,插件就會開始計算這些間隙,然後就使用預先定義的元素或是在網格中複製的內容來填滿這些間隙。可以定義用於元素的大小,列/行的大小,斷點的大小,或佈局是流動還是固定的。
RowGrid.js 是個非常小的,輕量級的 jQuery 插件,可以對圖像進行直排,而且是響應式的,可以無限滾動閱覽。
BttrLazyLoading是一款響應式圖像延遲加載的 jQuery 插件,允許用戶的 web 應用延遲圖片的加載直到圖像滾動。 BttrLazyLoading 提供四種不同的螢幕大小版本: 手機 (
jqGrid 是一個用來顯示網格資料的jQuery插件,透過使用jqGrid可以輕鬆實現前端頁面與後台資料的ajax非同步通訊。
Masonry是一款很好用的jquery網頁佈局插件,它可以去掉不同高度div之間的空白,讓你的網頁看上去更加的整齊、漂亮!
jQuery拖曳插件Shapeshift,拖曳可以重新排列在一個容器或甚至將在多個物品使容器變形。拖曳元素周圍可以改變他們的索引位置在它們的父容器。
Nested是一個幫助你創建多列的,動態的網格佈局,和其它的類似的類庫或者jQuery插件不一樣,它幫助你去掉所有的間隙。使用這個插件它將幫助你掃描所有的間隙的尺寸,以便重新排序元素,這和其它的類別庫或插件類似,但是Nested最後一步會幫助你縮放元素,以便消除所有的間距。
Headsup Grid的特點是它可以在不同的平台上顯示出不同的風格。
Wookmark jQuery plugin 是一個用來實現現在很流行的瀑布流的網頁佈局效果的 jQuery 插件。
jQuery Waterfall是用li標籤製作多列瀑布流佈局滑鼠滾動頁面圖片無限載入效果。
Grid-A-Licious 是一個簡單易用的 jQuery 插件,可用於創建響應式瀑布流佈局,針對不同設備可自動適應寬度。你可以透過參數設定它的寬度以及動態顯示時的速度、延遲等等,客製化是比較高的。
gridster.js 是一個 jQuery 插件用來建立直覺的可拖放的佈局,支援多列佈局,你還可以動態的新增和刪除表格中的元素。
Gridly是個網格式的拖放移位jQuery插件,這個插件互動不錯,我們在拖曳的時候會顯示一些移動動畫,效果很好看。
此插件還有其它特色功能,例如關閉、點擊放大、增加模組等等。
CollagePlus是一個jQuery表格插件,你可以定義圖片之間的距離,透過CSS為它們加邊框。
Griddy是一個輕量級的插件,但是它能實現幾乎所有的效果,很多屬性是可選的,例如行數、行高、列數、列高、顏色等等…
jqGridView是新的,富客戶端的,基於XML , Ajax網格插件的jQuery庫。 jqGridView提供專業的解決方案,代表和編輯表格資料在網路上。精心設計的,具有強大的腳本API的,這可編輯網格是很簡單的DHTML與XML 的配置,並顯示出令人信服的成果與大量資料。 jqGridView可以輕鬆地執行好期待(管理通過的CSS ) 。 jqGridView並非平台根據插件,它可用於不同的網路程式設計平台,如: ASP技術.NET /的ASP , PHP中,爪哇島, CGI腳本等jqGridView已高度鮑澤相容性。
Ingrid在資料填充的操作上做了很多的簡化,看起來更接地氣一些。
jui_datagrid 是一個 Ajax 的 jQuery 表格插件,可用於操作表格數據,透過簡單和強大的 API 進行主題自訂、本地化支援等。
via:gbtags
以上25款jQuery網格佈局插件,能夠讓開發者和設計師在創建響應式布的網格佈局時,同時擁有迷人的視覺效果,以及一個兼容所有瀏覽器和手持設備的響應式的外觀。希望你們能夠喜歡!