「 等高響應(yīng)式布局 」是什么？介紹它之前，我們先回憶一下它的近親「等寬響應(yīng)式瀑布流」。

回憶一下，Pinterest、Google+、花瓣網(wǎng)、美麗說(shuō)等是否讓你沉浸于不斷往下拉體驗(yàn)豐富的圖片閱覽？

那種感覺(jué)就像逛街，讓所有商品呈現(xiàn)在網(wǎng)頁(yè)上，只需要往下拉鼠標(biāo)就能逐個(gè)瀏覽，不斷加載，他們簡(jiǎn)潔同時(shí)整齊，原因是他們的 寬度相等 ，但是 高度不一 。

?

這就是所謂的「等寬響應(yīng)式瀑布流」，它的特點(diǎn)如下：

1. 響應(yīng)式 ，適應(yīng)PC端以及移動(dòng)端各設(shè)備呈現(xiàn)不同的寬度和單列數(shù)量；

2. 等寬 ，這樣的布局十分適合瀑布流，有不斷向下的閱讀感；

3. 沒(méi)有腳的小鳥(niǎo) ，因?yàn)閮?nèi)容是不斷向下加載，因此頁(yè)腳基本是看不到了；

這樣的布局引起了一個(gè)風(fēng)潮，然而把圖片適應(yīng)到等寬，高度等比例變化，對(duì)不考慮容器高度的瀏覽來(lái)說(shuō)實(shí)現(xiàn)并不難，因此業(yè)界也大多采用了這樣的布局，而且可以響應(yīng)式，在不同屏幕寬度可以變化不同卡片寬度。

然而，回歸正題，今天要說(shuō)的和這個(gè)不同，但是相近，它就是「 等高響應(yīng)式布局 」。

?

先看看效果圖：

如圖，并不像等寬一樣簡(jiǎn)單，要在不改變圖片分辨率(寬高比)同時(shí)保持等高且占滿(mǎn)行寬度，如何實(shí)現(xiàn)？不妨帶著問(wèn)題跟我走。

?

1 等高響應(yīng)式布局是什么？

①行內(nèi)高度相等；
②行間總寬度相等；
③自適應(yīng)寬度布局；
④圖片分辨率（寬高比）不變；

?

2 難在那里？

①行內(nèi)高度一致，行間高度不一致，但是相差不能太多；
②并不知道一行需要多少個(gè)圖片才能占滿(mǎn)寬度，由于高度不確定，圖片的寬度也不能等比變化；
③如何做到自適應(yīng)？
④布局用于用戶(hù)的個(gè)人相冊(cè)，數(shù)據(jù)量是有限且未知的，如何保證圖片數(shù)量滿(mǎn)行顯示？

由上可知，這種布局涉及太多變量，而且最難的是做到圖片分辨率不改變，不影響圖片質(zhì)量效果。

該如下下手？我的思路是： 確定一個(gè)變量，其他變量根據(jù)這個(gè)變量做適應(yīng)性調(diào)整 。

?

3 解決方法（具體下面會(huì)有圖示）

① 確定一個(gè)變量。 由于當(dāng)前的瀏覽器寬度是固定的，因此可以根據(jù)瀏覽器寬度范圍制定一個(gè)標(biāo)準(zhǔn)高度，類(lèi)似CSS的 媒體查詢(xún) (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é)出一些別的問(wèn)題，我用了以下不同的處理方法把這些問(wèn)題解決。

?

5 其他問(wèn)題

①高度調(diào)整公式會(huì)產(chǎn)生百分比，瀏覽器是會(huì)直接取整，因此可能會(huì)產(chǎn)生-2到2px的誤差；

解決方法 ：調(diào)整后記錄每行誤差值gap,然后循環(huán)把gap的值分給同行每一張圖片，這樣前2張圖片可能會(huì)有±1px的圖片寬度變化，但是用戶(hù)基本覺(jué)察不了圖片的輕微拉伸變化。

②用戶(hù)圖片數(shù)可能過(guò)少，會(huì)有圖片只有1-3張占不滿(mǎn)一行的情況，該怎樣顯示布局；

解決方法 ：判斷只有1行圖片的時(shí)候不作布局調(diào)整，少于1行則默認(rèn)顯示等高變化后的圖片即可(即只調(diào)整一次，不需要為剩余值再自適應(yīng)）。

③ 每行調(diào)整前的剩余寬度過(guò)大，導(dǎo)致調(diào)整后寬高很大；

解決方法 ：若調(diào)整后寬高是原始寬高的150%左右則該行舍棄，這里考慮到整體圖片質(zhì)量，確保不影響圖片墻效果。

④ 用戶(hù)上傳的照片太小，例如16×16的小圖標(biāo)，如果一樣的方式調(diào)整會(huì)與400×800這些圖片并列放大，造成很大縮放比。

解決方法 ：考慮到是圖片墻的效果，一般不會(huì)有用戶(hù)傳一些其他的圖片，例如表情素材等等，同時(shí)在圖片處理時(shí)可以加一個(gè)排序，獲取了圖片寬高后把小于一定值的圖片排在最后再一起顯示；

?

6 其他

目前有2個(gè)網(wǎng)站已經(jīng)初步實(shí)現(xiàn)這種效果，如百度圖片和flickr，如下圖：

然而，我們的布局有如下優(yōu)勢(shì)：

（1） flickr并沒(méi)有兼容到ie6-7，可是由于我們的項(xiàng)目一般用戶(hù)量比較大同時(shí)要考慮到所有用戶(hù)，因此有必要做到兼容ie6以上所有瀏覽器包括各種現(xiàn)代瀏覽器；

（2） 百度其實(shí)并沒(méi)有做到完美的滿(mǎn)寬，如圖右邊，每行右邊會(huì)出現(xiàn)不對(duì)齊，而我們的解決方案可以避免這樣的誤差(其他問(wèn)題①)；

?

7 總結(jié)

這個(gè)布局的優(yōu)勢(shì)顯而易見(jiàn)： 整齊又多變，規(guī)則又繁雜 ，用最純粹的方式展現(xiàn)圖片的魅力。

就如一個(gè)「網(wǎng)站版的攝影展」。

實(shí)現(xiàn)如此的方案，需要細(xì)心分析，仔細(xì)考慮，繁雜的效果只會(huì)降低圖片的展現(xiàn)力，所以需要先做加法，豐富功能，再做減法，去其糟粕。

?

demo效果請(qǐng) 點(diǎn)擊這里 。

這個(gè)布局將會(huì)用在QQ空間V8版本新攝影控版式，敬請(qǐng)期待。

?
注明出處格式：騰訊ISUX ( http://isux.tencent.com/high-equal-response-layout-html.html )