jQuery為廣大用戶提供了一種簡單的方法來選擇HTML元素和操作DOM，并且能更加動態(tài)、更加靈活的前端布局，據(jù)統(tǒng)計有95.4％的網(wǎng)站使用jQuery。

jQuery Grids是怎樣工作的?

jQuery的網(wǎng)格可以為你的網(wǎng)站創(chuàng)建像Pinterest一樣的布局。它像一個虛擬矩陣一樣工作，并且遵循“箱內(nèi)嵌”原則。 jQuery的網(wǎng)格動態(tài)計算出什么是項目最好的安排以及填充頁面的方式，使的空白空間最少，如下圖。

相比的CSS網(wǎng)格jQuery網(wǎng)格的主要優(yōu)點是，它們支持圖像或其它具有不同寬度和高度的媒體元素。下面介紹目前市場上10個最迷人的jQuery網(wǎng)格插件-當然和jQuery一樣都是開源和免費的。

1. jQuery Nested

jQuery Nested提供了一個方便的多列網(wǎng)格布局響應(yīng)，并支持所有設(shè)備類型。該jQuery插件可以說是完全無間隙的，在間隙自由度上處理得堪稱完美。
 jQuery Nested在填充表格矩陣中遵循獨特的腳本。首先，創(chuàng)建了一個多列格，然后掃描矩陣間隙，并通過重新排序不同的元素來填充它們。最后-也就是使得該網(wǎng)格無間隙的步驟-調(diào)整在底行中與間隙不正確匹配的任何元素。

2. Freewall

Freewall允許創(chuàng)建你想要無論是圖像的網(wǎng)格、嵌套網(wǎng)格或Metro風格的網(wǎng)格布局。它有許多像JavaScript變量一樣可以設(shè)置的選項，如gutterX、gutterY、動畫、cellW、cellH等。它還有自定義事件，如onGapFound和onResize，以及自定義方法。

3. Masonry

Masonry這個名字對于一些非常有經(jīng)驗的設(shè)計師來說已經(jīng)再熟悉不過了。如果你還不了解，Masonry是既適用于jQuery又適用于vanilla JavaScript的級聯(lián)網(wǎng)格布局庫。
 該插件以許多流行的WordPress主題為基礎(chǔ)。你甚至不需要把它上傳到你的服務(wù)器，就可以輕易直接從CDN鏈接到庫。

Masonry可以說是建立得最好的jQuery網(wǎng)格，這就是為什么它有很多的選項的原因。你可以人容易在Bower或Node Package Manager上安裝它。有了它的幫助你可以實現(xiàn)不同的網(wǎng)格布局，以及設(shè)置多個自定義變量、方法和事件。

4. Gridify

Gridify是一個輕量級的JavaScript插件，即可與jQuery又可與純JavaScript一起使用。
 Gridify像Pinterest一樣布局。它支持加載事件，動態(tài)計算項目的寬度，并且處理具有非常長的高度的項目，還可通過CSS3的轉(zhuǎn)換制作動畫。

5. Shapeshift

Shapeshift是一個非常酷的拖拽jQuery網(wǎng)格系統(tǒng)。用戶可以在整個頁面上拖拽元素，元素每一次移動Shapeshift都為它們重組一個新的位置。
 拖動事件在父容器中改變元素的索引位置。這樣Spaceshift就不會使子元素的邏輯索引系統(tǒng)混亂。

Shapeshift在觸摸設(shè)備上同樣有效，因為它巧妙地利用了jQuery UITouch Punch應(yīng)用程序。

翻譯自：轉(zhuǎn)載請注明本文轉(zhuǎn)載自慧都控件網(wǎng)