網頁上的攝影展：等高響應布局實現

　　「等高響應式布局」是什麼?介紹它之前，我們先回憶一下它的近親「等寬響應式瀑布流」。

　　回憶一下，Pinterest、Google+、花瓣網、美麗說等是否讓你沉浸於不斷往下拉體驗豐富的圖片閱覽?

　　那種感覺就像逛街，讓所有商品呈現在網頁上，只需要往下拉鼠標就能逐個浏覽，不斷加載，他們簡潔同時整齊，原因是他們的寬度相等，但是高度不一。

　　這就是所謂的「等寬響應式瀑布流」，它的特點如下：

　　1.響應式，適應PC端以及移動端各設備呈現不同的寬度和單列數量;

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

　　3.沒有腳的小鳥，因為內容是不斷向下加載，因此頁腳基本是看不到了;

　　這樣的布局引起了一個風潮，然而把圖片適應到等寬，高度等比例變化，對不考慮容器高度的浏覽來說實現並不難，因此業界也大多采用了這樣的布局，而且可以響應式，在不同屏幕寬度可以變化不同卡片寬度。

　　然而，回歸正題，今天要說的和這個不同，但是相近，它就是「等高響應式布局」。

　　先看看效果圖：

　　如圖，並不像等寬一樣簡單，要在不改變圖片分辨率(寬高比)同時保持等高且占滿行寬度，如何實現?不妨帶著問題跟我走。

　　1 等高響應式布局是什麼?

　　①行內高度相等;

　　②行間總寬度相等;

　　③自適應寬度布局;

　　④圖片分辨率(寬高比)不變;

　　2 難在那裡?

　　①行內高度一致，行間高度不一致，但是相差不能太多;

　　②並不知道一行需要多少個圖片才能占滿寬度，由於高度不確定，圖片的寬度也不能等比變化;

　　③如何做到自適應?

　　④布局用於用戶的個人相冊，數據量是有限且未知的，如何保證圖片數量滿行顯示?

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

　　該如下下手?我的思路是：確定一個變量，其他變量根據這個變量做適應性調整。

　　3 解決方法(具體下面會有圖示)

　　①確定一個變量。由於當前的浏覽器寬度是固定的，因此可以根據浏覽器寬度范圍制定一個標准高度，類似CSS的媒體查詢(media query);

　　②初次變換。所有圖片寬度根據這個標准高度作寬度的等比例縮放;

　　③創造容器。每行建立一個div，並裝入盡可能多的圖片，直到容器裝不下;

　　④第一步調整。每行根據自己與目標寬度(當前浏覽器寬度)的差值，再等比例變化寬、高。

　　公式如下：當前行總寬度/目標寬度=每個圖片當前高度/變化後高度;

　　⑤第二步調整。根據變化後高度再等比變化各圖片寬度;

　　4 操作圖示

　　大工告成!然而深入考慮和分析，還總結出一些別的問題，我用了以下不同的處理方法把這些問題解決。

　　5 其他問題

　　①高度調整公式會產生百分比，浏覽器是會直接取整，因此可能會產生-2到2px的誤差;

　　解決方法：調整後記錄每行誤差值gap,然後循環把gap的值分給同行每一張圖片，這樣前2張圖片可能會有±1px的圖片寬度變化，但是用戶基本覺察不了圖片的輕微拉伸變化。

　　②用戶圖片數可能過少，會有圖片只有1-3張占不滿一行的情況，該怎樣顯示布局;

　　解決方法：判斷只有1行圖片的時候不作布局調整，少於1行則默認顯示等高變化後的圖片即可(即只調整一次，不需要為剩余值再自適應)。

　　③ 每行調整前的剩余寬度過大，導致調整後寬高很大;

　　解決方法：若調整後寬高是原始寬高的150%左右則該行捨棄，這裡考慮到整體圖片質量，確保不影響圖片牆效果。

　　④ 用戶上傳的照片太小，例如16×16的小圖標，如果一樣的方式調整會與400×800這些圖片並列放大，造成很大縮放比。

　　解決方法：考慮到是圖片牆的效果，一般不會有用戶傳一些其他的圖片，例如表情素材等等，同時在圖片處理時可以加一個排序，獲取了圖片寬高後把小於一定值的圖片排在最後再一起顯示;

　　6 其他

　　目前有2個網站已經初步實現這種效果，如百度圖片和flickr，如下圖：

　　然而，我們的布局有如下優勢：

　　(1) flickr並沒有兼容到ie6-7，可是由於我們的項目一般用戶量比較大同時要考慮到所有用戶，因此有必要做到兼容ie6以上所有浏覽器包括各種現代浏覽器;

　　(2) 百度其實並沒有做到完美的滿寬，如圖右邊，每行右邊會出現不對齊，而我們的解決方案可以避免這樣的誤差(其他問題①);

　　7 總結

　　這個布局的優勢顯而易見：整齊又多變，規則又繁雜，用最純粹的方式展現圖片的魅力。

　　就如一個「網站版的攝影展」。

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

　　demo效果請點擊這裡。

　　這個布局將會用在QQ空間V8版本新攝影控版式，敬請期待。

　　感謝你的閱讀，本文由 騰訊ISUX 版權所有，轉載時請注明出處，違者必究，謝謝你的合作。

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