網(wǎng)頁上的等高響應(yīng)布局實(shí)現(xiàn)
「等高響應(yīng)式布局」是什么?介紹它之前,我們先回憶一下它的近親「等寬響應(yīng)式瀑布流」。
回憶一下,Pinterest、Google+、花瓣網(wǎng)、美麗說等是否讓你沉浸于不斷往下拉體驗(yàn)豐富的圖片閱覽?
那種感覺就像逛街,讓所有商品呈現(xiàn)在網(wǎng)頁上,只需要往下拉鼠標(biāo)就能逐個(gè)瀏覽,不斷加載,他們簡潔同時(shí)整齊,原因是他們的寬度相等,但是高度不一。
這就是所謂的「等寬響應(yīng)式瀑布流」,它的特點(diǎn)如下:
1.響應(yīng)式,適應(yīng)PC端以及移動(dòng)端各設(shè)備呈現(xiàn)不同的寬度和單列數(shù)量;
2.等寬,這樣的布局十分適合瀑布流,有不斷向下的閱讀感;
3.沒有腳的小鳥,因?yàn)閮?nèi)容是不斷向下加載,因此頁腳基本是看不到了;
這樣的布局引起了一個(gè)風(fēng)潮,然而把圖片適應(yīng)到等寬,高度等比例變化,對不考慮容器高度的瀏覽來說實(shí)現(xiàn)并不難,因此業(yè)界也大多采用了這樣的布局,而且可以響應(yīng)式,在不同屏幕寬度可以變化不同卡片寬度。
然而,回歸正題,今天要說的和這個(gè)不同,但是相近,它就是「等高響應(yīng)式布局」。
先看看效果圖:
如圖,并不像等寬一樣簡單,要在不改變圖片分辨率(寬高比)同時(shí)保持等高且占滿行寬度,如何實(shí)現(xiàn)?不妨帶著問題跟我走。
1 等高響應(yīng)式布局是什么?
①行內(nèi)高度相等;
②行間總寬度相等;
③自適應(yīng)寬度布局;
④圖片分辨率(寬高比)不變;
2 難在那里?
①行內(nèi)高度一致,行間高度不一致,但是相差不能太多;
②并不知道一行需要多少個(gè)圖片才能占滿寬度,由于高度不確定,圖片的寬度也不能等比變化;
③如何做到自適應(yīng)?
④布局用于用戶的個(gè)人相冊,數(shù)據(jù)量是有限且未知的,如何保證圖片數(shù)量滿行顯示?
由上可知,這種布局涉及太多變量,而且最難的是做到圖片分辨率不改變,不影響圖片質(zhì)量效果。
該如下下手?我的思路是:確定一個(gè)變量,其他變量根據(jù)這個(gè)變量做適應(yīng)性調(diào)整。
3 解決方法(具體下面會(huì)有圖示)
①確定一個(gè)變量。由于當(dāng)前的瀏覽器寬度是固定的,因此可以根據(jù)瀏覽器寬度范圍制定一個(gè)標(biāo)準(zhǔn)高度,類似CSS的媒體查詢(media query);
②初次變換。所有圖片寬度根據(jù)這個(gè)標(biāo)準(zhǔn)高度作寬度的等比例縮放;
③創(chuàng)造容器。每行建立一個(gè)div,并裝入盡可能多的圖片,直到容器裝不下;
④第一步調(diào)整。每行根據(jù)自己與目標(biāo)寬度(當(dāng)前瀏覽器寬度)的差值,再等比例變化寬、高。
公式如下:當(dāng)前行總寬度/目標(biāo)寬度=每個(gè)圖片當(dāng)前高度/變化后高度;
⑤第二步調(diào)整。根據(jù)變化后高度再等比變化各圖片寬度;
4 操作圖示
大工告成!然而深入考慮和分析,還總結(jié)出一些別的問題,我用了以下不同的處理方法把這些問題解決。
5 其他問題
①高度調(diào)整公式會(huì)產(chǎn)生百分比,瀏覽器是會(huì)直接取整,因此可能會(huì)產(chǎn)生-2到2px的誤差;
解決方法:調(diào)整后記錄每行誤差值gap,然后循環(huán)把gap的值分給同行每一張圖片,這樣前2張圖片可能會(huì)有±1px的圖片寬度變化,但是用戶基本覺察不了圖片的輕微拉伸變化。
②用戶圖片數(shù)可能過少,會(huì)有圖片只有1-3張占不滿一行的情況,該怎樣顯示布局;
解決方法:判斷只有1行圖片的時(shí)候不作布局調(diào)整,少于1行則默認(rèn)顯示等高變化后的圖片即可(即只調(diào)整一次,不需要為剩余值再自適應(yīng))。
③ 每行調(diào)整前的剩余寬度過大,導(dǎo)致調(diào)整后寬高很大;
解決方法:若調(diào)整后寬高是原始寬高的150%左右則該行舍棄,這里考慮到整體圖片質(zhì)量,確保不影響圖片墻效果。
④ 用戶上傳的照片太小,例如16×16的小圖標(biāo),如果一樣的方式調(diào)整會(huì)與400×800這些圖片并列放大,造成很大縮放比。
解決方法:考慮到是圖片墻的效果,一般不會(huì)有用戶傳一些其他的圖片,例如表情素材等等,同時(shí)在圖片處理時(shí)可以加一個(gè)排序,獲取了圖片寬高后把小于一定值的圖片排在最后再一起顯示;
6 其他
目前有2個(gè)網(wǎng)站已經(jīng)初步實(shí)現(xiàn)這種效果,如百度圖片和flickr,如下圖:
然而,我們的布局有如下優(yōu)勢:
(1) flickr并沒有兼容到ie6-7,可是由于我們的項(xiàng)目一般用戶量比較大同時(shí)要考慮到所有用戶,因此有必要做到兼容ie6以上所有瀏覽器包括各種現(xiàn)代瀏覽器;
(2) 百度其實(shí)并沒有做到完美的滿寬,如圖右邊,每行右邊會(huì)出現(xiàn)不對齊,而我們的解決方案可以避免這樣的誤差(其他問題①);
7 總結(jié)
這個(gè)布局的優(yōu)勢顯而易見:整齊又多變,規(guī)則又繁雜,用最純粹的方式展現(xiàn)圖片的魅力。
就如一個(gè)「網(wǎng)站版的攝影展」。
實(shí)現(xiàn)如此的方案,需要細(xì)心分析,仔細(xì)考慮,繁雜的效果只會(huì)降低圖片的展現(xiàn)力,所以需要先做加法,豐富功能,再做減法,去其糟粕。
demo效果請點(diǎn)擊這里。
這個(gè)布局將會(huì)用在QQ空間V8版本新攝影控版式,敬請期待。
本文地址:http://irelandcustomcontracting.com/tutorial/di1847.html
您可能還喜歡
- Macaron 馬卡龍系色譜 ;附HC(16進(jìn)制碼
- 7個(gè)手機(jī)版網(wǎng)頁設(shè)計(jì)的原則
- 折紙多邊形網(wǎng)頁背景效果制作教程
- 龐門正道:好好玩耍的點(diǎn)線面(上)
- 網(wǎng)頁設(shè)計(jì)中的常見頁面布局方式
- WAP APP的柵格設(shè)計(jì)
- 八種很漂亮的排版方法和技巧分享
- 網(wǎng)頁設(shè)計(jì)的首屏標(biāo)準(zhǔn)你了解多少?
- 字體大寶庫:40款為網(wǎng)頁設(shè)計(jì)師準(zhǔn)備的時(shí)
- 視覺設(shè)計(jì)分享—專題頁面設(shè)計(jì)篇
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問題
- 網(wǎng)頁設(shè)計(jì)精粹 網(wǎng)頁中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢
- 10個(gè)智能對象處理的ps技巧
- 網(wǎng)頁UI - 原子設(shè)計(jì)理論(上)
- 如何通過設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺設(shè)計(jì)系列文章(二):全屏