不去考慮不斷改變屏幕分辨率時(shí)css中的存在的許多問題。倒有一個(gè)共同的問題是許多設(shè)計(jì)師更可能面臨的--多重內(nèi)容盒子。當(dāng)有許多浮動(dòng)元素時(shí)，一些尷尬的空白會(huì)出現(xiàn)在高度變換的區(qū)域之間，下面是這方面的一個(gè)例子：

　　如果我們打算在一個(gè)固定寬度的布局中使用多個(gè)div，固定很容易：只需調(diào)整所有div在合適的位置就行，在流動(dòng)設(shè)計(jì)中用這種方式處理多個(gè)divs似乎不可能。布局的每一次調(diào)整，在新的點(diǎn)上將出現(xiàn)不同數(shù)量的空白。

　　在較小分辨率下查看相同的布局，布局變成了兩欄。但是，在這種情況下，我們得了不同的空白。任何設(shè)計(jì)師覺得這是一個(gè)尷尬的問題。通常情況下，因?yàn)闆]有可行方案解決此問題，這種布局被強(qiáng)行設(shè)置成固定寬度。

　　幸運(yùn)的是，這個(gè)問題不是不可能解決，而是相當(dāng)容易--源于 David DeSandro’s jQuery Plugin: jQuery Masonry 提供的方法。

　　jQuery圬工是什么?

　　jQuery圬工是一個(gè)非常容易使用的插件，用David DeSandro 自己的話說：“將jQuery看作css浮動(dòng)的對(duì)立面，浮動(dòng)元素的排列是先橫向后縱向，圬工排列是先縱向后橫向，其結(jié)果是在高度變換元素的垂直方向上沒有間隙，就像是一座石頭強(qiáng)。”

　　如何使用jQuery masonry

　　在上面的例子中，所有盒子被放置在 ID為“item”的段落之中，“item”設(shè)置了30%的寬度，并向左浮動(dòng)，所有這些放置在寬度為90%的# wrapper中，一旦段落的寬度達(dá)到#wrapper的寬度，無論是否有空白留下，它將新起一行。

　　下載 jQuery Masonry 插件，并對(duì)#wrapper應(yīng)用masonry()方法，就很容易修復(fù)它。

　　$('#wrapper').masonry();

　　下面兩張圖片顯示了該插件的力量。第一個(gè)是在大分辨率屏幕上的布局情況，第二個(gè)是同樣的布局，在小分辨率屏幕中查看，它折疊成了兩欄。

　　該插件的一個(gè)bug和一個(gè)修復(fù)方法

　　使用該插件，如果用戶縮放瀏覽器，你會(huì)注意到div層保持在原來的位置，但是刷新后，它有完好。但用戶不知道需要書信去修復(fù)該問題。因此，按下面的方法改變html代碼將很容易的修復(fù)該問題。

　　現(xiàn)在，用戶每次改變?yōu)g覽器的大小，瀏覽器會(huì)自動(dòng)刷新并重載整個(gè)腳本。

最新評(píng)論