feeds流中的圖片

先來看看常見的產品中的feeds流中的佈局：

一、朋友圈

純客戶端的feeds流，單張圖片大圖顯示，這裏確定也限制了最大高度或者寬度。大於一張圖片則以正方形顯示，一共顯示9張圖，九宮格，多了就不排列了。

二、QQ空間

單張圖片，這裏我發了幾張測試圖片，包括正常的橫圖，和長度很長的圖，高度很高的圖。發現最終都顯示的很小，max-width或者max-height爲100，固然這裏不是用css提早寫死，而是動態計算出來。圖片的寬高由CGI返回，這也就不難計算了，等比縮放就行。

element.style {
    width: 55px;
    height: 100px;
    background-image: url("//h5.qzone.qq.com/tx_tls_gate=m.qpic.cn/psb?/V12OVEch07zgAo/y2b1dFIeF0H*Di…AAAFABA!&su=010529329#sce=5-11-3&rf=v1_ht5_qz_3.4.0_001_idc_b-0-0&appid=2");
}

element.style {
    width: 100px;
    height: 56px;
    background-image: url("//h5.qzone.qq.com/tx_tls_gate=m.qpic.cn/psb?/V10nNuDB2Bs6rG/RstlMI47hpGhCg…DANI!&su=0224240113#sce=5-11-3&rf=v1_ht5_qz_3.4.0_001_idc_b-0-0&appid=311");
}

多張圖片，這個就更好實現了，用background-image就行，也不用提早知道大小，設置background-position的位置，還有裁剪的方式，通常也就居中顯示了。

三、興趣部落

興趣部落的圖片很簡單粗暴，之間採用了background-image的方式，無論多圖仍是單圖，統一正方形顯示。

四、淘寶社區

下面是淘寶客戶端的截圖，不知道內部的實現是原生仍是web頁面，其圖片的佈局也是和興趣部落一致，多圖單圖顯示方式同樣。

總結以上幾點，在feeds流中一般會遇到這幾種常見的圖片佈局：

一、寬高比例協調，固定最大寬高度，寬高等比縮放

<img class="ame-post_index-post-img-box" src="xxxx"/>

.game-post_index-post-img-box {
    margin-right: 5px;
    margin-top: 5px;
    border: none;
    background-size: cover;
    background-position: center center;
    float: left;
    display: block;
    position: relative;
    width: auto;
    height: auto;
    max-width: 180px;
    max-height: 180px;
    background-image: url(.http://iamaddy.github.io/img/feeds_pic/img/game-circle/pic_ph.22744c92.png);
    background-color: #e8e8e8;
}

二、寬高比例不協調，局部顯示

利用background-image佈局

// 高度很大
.game-post_index-post-img-wrap_high .game-post_index-post-img-box {
    width: 79px;
    margin-right: 5px;
    margin-top: 5px;
    border: none;
    background-size: cover;
    background-position: center center;
    float: left;
    display: block;
    position: relative;
    height: 180px;
    max-height: 180px;
}
// 寬度很大
.game-post_index-post-img-wrap_long .game-post_index-post-img-box {
    height: 79px;
    margin-right: 5px;
    margin-top: 5px;
    border: none;
    background-size: cover;
    background-position: center center;
    float: left;
    display: block;
    position: relative;
    width: 247px;
    max-width: 247px;
}

三、多張圖片，長寬固定

也是利用background-image佈局

.game-post_index-post-img-wrap_multi .game-post_index-post-img-box {
    width: 79px;
    height: 79px;
    margin-right: 5px;
    margin-top: 5px;
    border: none;
    background-size: cover;
    background-position: center center;
    float: left;
    display: block;
    position: relative;
}

而上圖也就是微信遊戲圈子的feeds流中的展現方法，和朋友圈同樣。
但咱們的後臺服務並無返回圖片的寬高啊，展現固然沒有問題。

但這樣的問題是，因爲不知道寬高，全部單張圖片的顯示方式都要等到圖片下載下來才能知道，由於那時候才知道寬高比。這樣的結果就是頁面迴流，對性能的影響特別嚴重：

可現實就是後臺目前還沒法提供啊，真是一萬匹草泥馬在奔騰，後來就這樣迂迴來曲線救國。
一、前端上傳時計算圖片的寬高；
二、後臺CGI接收後和圖片地址一塊兒存儲起來；
三、取feeds流的接口不變，前端從url解析出寬高。
在用FileReader加載完圖片後，用img的兩個屬性就能獲取到原始的高寬了，也沒有什麼技術瓶頸。

var nWidth  = img.naturalWidth,
    nHeight = img.naturalHeight;

縱觀上面的幾種佈局方式，單、多張圖片的實現最簡單，也不須要知道寬高，但顯得比較單一，單張圖片展現出來的信息較少，並且從視覺角度講，留有較大空白，圖片信息展現的比較少。

若是將單張圖片放大，佈局顯得緊湊，圖片細節多，對於不關心的圖片，能夠省去二次點擊查看，就相似朋友圈的feeds流，但兩張圖的時候與三張以上的圖片外框元素同樣大小，感受有點小氣，也多是侷限於做者頭像，不能放的過大。而遊戲圈原樣照搬朋友圈的就並不太合適，兩個是不一樣的佈局。

我的仍是傾向於看大圖，結合興趣部落的多圖和朋友圈的單圖展現方式。