|
四、jQuery圬工
不去考慮不斷改變屏幕分辨率時css中的存在的許多問題。倒有一個共同的問題是許多設(shè)計師更可能面臨的－－多重內(nèi)容盒子。當有許多浮動元素時，一些尷尬的空白會出現(xiàn)在高度變換的區(qū)域之間，下面是這方面的一個例子：
如果我們打算在一個固定寬度的布局中使用多個div，固定很容易：只需調(diào)整所有div在合適的位置就行，在流動設(shè)計中用這種方式處理多個divs似乎不可能。布局的每一次調(diào)整，在新的點上將出現(xiàn)不同數(shù)量的空白。
在較小分辨率下查看相同的布局，布局變成了兩欄。但是，在這種情況下，我們得了不同的空白。任何設(shè)計師覺得這是一個尷尬的問題。通常情況下，因為沒有可行方案解決此問題，這種布局被強行設(shè)置成固定寬度。
幸運的是，這個問題不是不可能解決，而是相當容易－－源于 David DeSandro’s jQuery Plugin: jQuery Masonry 提供的方法。
jQuery圬工是什么？
jQuery圬工是一個非常容易使用的插件，用David DeSandro 自己的話說：“將jQuery看作css浮動的對立面，浮動元素的排列是先橫向后縱向，圬工排列是先縱向后橫向，其結(jié)果是在高度變換元素的垂直方向上沒有間隙，就像是一座石頭強�！�
如何使用jQuery masonry
在上面的例子中，所有盒子被放置在 ID為“item”的段落之中，“item”設(shè)置了30%的寬度，并向左浮動，所有這些放置在寬度為90%的# wrapper中，一旦段落的寬度達到#wrapper的寬度，無論是否有空白留下，它將新起一行。
下載 jQuery Masonry 插件，并對#wrapper應(yīng)用masonry()方法，就很容易修復(fù)它。
$('#wrapper').masonry();
下面兩張圖片顯示了該插件的力量。第一個是在大分辨率屏幕上的布局情況，第二個是同樣的布局，在小分辨率屏幕中查看，它折疊成了兩欄。
該插件的一個bug和一個修復(fù)方法
使用該插件，如果用戶縮放瀏覽器，你會注意到div層保持在原來的位置，但是刷新后，它有完好。但用戶不知道需要書信去修復(fù)該問題。因此，按下面的方法改變html代碼將很容易的修復(fù)該問題。
<body onresize="window.location=window.location;">
現(xiàn)在，用戶每次改變?yōu)g覽器的大小，瀏覽器會自動刷新并重載整個腳本。
出處：藍色理想
責任編輯：bluehearts
上一頁 自適應(yīng)css布局——流動布局新時代 [5] 下一頁 自適應(yīng)css布局——流動布局新時代 [7]
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 6 頁 自適應(yīng)css布局——流動布局新時代 [6]
