七個幫助你處理Web頁面層佈局的jQuery插件

1.UI.Layout  jQuery UI佈局插件

官方網站：http://layout.jquery-dev.com/index.cfm

使用大小可摺疊的嵌套面板和大量選項建立高級UI佈局。佈局能夠建立任何你想要的UI外觀; 從簡單的標題或側邊欄到具備工具欄，菜單，幫助面板，狀態欄，子表單等的複雜應用程序。集成並加強其餘UI小部件，如選項卡，手風琴和對話框，以建立豐富的界面。

 

 

2.jQUery Masonry

官方網站：https://masonry.desandro.com/?resources/jquery-masonry

全部項目的大小和樣式都由您本身的CSS處理。項目大小能夠用響應式佈局的百分比來設置

 

 

3.jLayout

jLayout JavaScript庫提供了用於佈局組件的佈局算法。一個組件是一個抽象; 它能夠經過多種方式實現，例如HTML5 Canvas繪圖中的項目或HTML元素。jLayout庫容許您專一於繪製各個組件，而不是如何將其排列在屏幕上。

GitHub：https://github.com/bramstein/jlayout/

 

 

 

4.jQuery pageSlide

Query pageSlide 是一個jQuery插件，它能夠控制一個隱藏頁面的顯示和關閉。jQuery展開左右側欄目插件PageSlide，pageslide插件功能實現現實隱藏側邊欄的功能。插件能夠讀取另個一html,也能夠是當前頁面中的元素，目前比較流行的導航菜單展示形式,特別是在手機端或者觸屏頁面,效果仍是不錯的

demo：http://www.jq22.com/jquery-info343

 

 

 

 

5.jQSlickWrap

http://www.jwf.us/projects/jQSlickWrap/

jQSlickWrap是一個真正能夠將內容包裹在圖片周圍的jQuery插件。該插件使用HTML5 Canvas標籤,用法很是簡單。能夠輕鬆而準確地實現浮動圖像的文字環繞效果。

 

 

 

6.Columnizer

官方網址：https://welcome.totheinter.net/columnizer-jquery-plugin/

Columnizer jQuery Plugin將自動以報紙列格式來佈局您的內容。您能夠指定列寬或列的靜態數量。並且，固然，這很容易使用！Columnizer會將CSS類添加到它建立的列中。每列將有一個「列」類名。第一列將有「第一」，最後一列將有「最後」。這使您能夠更輕鬆地定位CSS標記中的特定列。

github:https://github.com/adamwulf/Columnizer-jQuery-Plugin

 

 

7：Columns

jQueryJSON數據轉換爲html表插件Columns

GitHub：https://github.com/eisenbraun/columns

Columns建立JSON數據轉化爲HTML方法 引用jQuery庫1.7或更高版本和Columns插件文件，列是將JSON數據建立爲可排序，可搜索和分頁的HTML表格的簡單方法。全部你須要的是提供的數據，和列將完成其他的。由於Columns動態地建立了全部必要的HTML，因此惟一須要的HTML是一個空的HTML元素，好比一個<div>標籤，在初始化時使用相應的id。

 

==================================================================
注意：本文原創做者祈澈姑娘，創做不易。轉載請標明做者和文章的原文連接，或到微信公衆號獲取受權。

若須要轉載，聯繫原文做者

更多技術文章，行業交流，web前端開發資源，前端交流羣，開源代碼，前端乾貨，職場感悟，求職指導，請點擊公衆號原文連接：祈澈姑娘

或者聯繫個人微信，創做不易，走過路過點個讚唄