亚洲免费在线-亚洲免费在线播放-亚洲免费在线观看-亚洲免费在线观看视频-亚洲免费在线看-亚洲免费在线视频

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

系統 1899 0

?

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

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

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

?

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

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

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

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

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

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

?

先看看效果圖:

photoLayout_preview

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

?

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

①行內高度相等;
②行間總寬度相等;
③自適應寬度布局;
④圖片分辨率(寬高比)不變;

?

2 難在那里?

①行內高度一致,行間高度不一致,但是相差不能太多;
②并不知道一行需要多少個圖片才能占滿寬度,由于高度不確定,圖片的寬度也不能等比變化;
③如何做到自適應?
④布局用于用戶的個人相冊,數據量是有限且未知的,如何保證圖片數量滿行顯示?

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

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

?

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

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

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

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

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

公式如下: 當前行總寬度/目標寬度=每個圖片當前高度/變化后高度
第二步調整。 根據變化后高度再等比變化各圖片寬度;

?

4 操作圖示

?

step123

step45

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

?

5 其他問題

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

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

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

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

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

解決方法 :若調整后寬高是原始寬高的150%左右則該行舍棄,這里考慮到整體圖片質量,確保不影響圖片墻效果。

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

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

?

6 其他

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

baidu_layout

flick_layout

然而,我們的布局有如下優勢:

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

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

?

7 總結

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

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

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

?

demo效果請 點擊這里

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

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

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


更多文章、技術交流、商務合作、聯系博主

微信掃碼或搜索:z360901061

微信掃一掃加我為好友

QQ號聯系: 360901061

您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。

【本文對您有幫助就好】

您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描上面二維碼支持博主2元、5元、10元、自定義金額等您想捐的金額吧,站長會非常 感謝您的哦!!!

發表我的評論
最新評論 總共0條評論
主站蜘蛛池模板: www.91自拍| 深夜福利免费在线观看 | a毛片免费播放全部完整 | 久久机热一这里只精品 | 天天射日日 | 国产伦精品一区二区免费 | 国产小视频免费观看 | 国产成人夜间影院在线观看 | 亚洲国产精品综合欧美 | 四虎影视8848a四虎在线播放 | 在线日韩视频 | 亚洲视频在线免费播放 | 国产一级爱c片免费播放 | 欧产日产国产精品专区 | 天天摸天天碰色综合网 | 成人短视频在线 | 久久国产高清 | 欧美日韩一区二区综合在线视频 | 色骚综合| 91欧美在线视频 | 就操成人网 | a一级毛片视频免费看 | 亚洲第一区在线 | 国产精品久久在线 | 国产97在线视频观看 | 精品一区二区三区免费爱 | 日本一级毛片2021免费 | 亚洲综合亚洲 | 久久夜靖品| 婷婷的久久五月综合先锋影音 | 视频二区精品中文字幕 | 九九热线精品视频6一 | 中国美女牲交一级毛片 | 欧美亚洲国产精品久久第一页 | 伊人99热| 国产特级毛片 | 99热在线免费播放 | 男人午夜影院 | 中文字幕曰韩一区二区不卡 | 97视频在线观看免费播放 | 午夜欧美性视频在线播放 |