feeds流中的圖片

LuDongWei 發(fā)布于2019-08-19 18:04 / 3070人閱讀

摘要：先來看看常見的產品中的流中的布局朋友圈純客戶端的流，單張圖片大圖顯示，這里肯定也限制了最大高度或者寬度。興趣部落興趣部落的圖片很簡單粗暴，之間采用了的方式，不管多圖還是單圖，統(tǒng)一正方形顯示。

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

1、朋友圈

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

2、QQ空間

單張圖片，這里我發(fā)了幾張測試圖片，包括正常的橫圖，和長度很長的圖，高度很高的圖。發(fā)現(xiàn)最終都顯示的很小，max-width或者max-height為100，當然這里不是用css提前寫死，而是動態(tài)計算出來。圖片的寬高由CGI返回，這也就不難計算了，等比縮放就行。

element.style {
    width: 55px;
    height: 100px;
    background-image: url("http://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("http://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");
}

多張圖片，這個就更好實現(xiàn)了，用background-image就行，也不用提前知道大小，設置background-position的位置，還有裁剪的方式，一般也就居中顯示了。

3、興趣部落

興趣部落的圖片很簡單粗暴，之間采用了background-image的方式，不管多圖還是單圖，統(tǒng)一正方形顯示。

4、淘寶社區(qū)

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

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

1、寬高比例協(xié)調，固定最大寬高度，寬高等比縮放


.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;
}

2、寬高比例不協(xié)調，局部顯示

利用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;
}

3、多張圖片，長寬固定

也是利用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流中的展示方法，和朋友圈一樣。
但我們的后臺服務并沒有返回圖片的寬高啊，展示當然沒有問題。

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

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

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

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

如果將單張圖片放大，布局顯得緊湊，圖片細節(jié)多，對于不關心的圖片，可以省去二次點擊查看，就類似朋友圈的feeds流，但兩張圖的時候與三張以上的圖片外框元素一樣大小，感覺有點小氣，也可能是局限于作者頭像，不能放的過大。而游戲圈原樣照搬朋友圈的就并不太合適，兩個是不同的布局。

個人還是傾向于看大圖，結合興趣部落的多圖和朋友圈的單圖展示方式。

云服務器 GPU云服務器識別圖片中的文字 feeds Feed excel提取圖片中的文字內容

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79160.html

feeds流中的圖片

摘要：先來看看常見的產品中的流中的布局朋友圈純客戶端的流，單張圖片大圖顯示，這里肯定也限制了最大高度或者寬度。興趣部落興趣部落的圖片很簡單粗暴，之間采用了的方式，不管多圖還是單圖，統(tǒng)一正方形顯示。先來看看常見的產品中的feeds流中的布局： 1、朋友圈純客戶端的feeds流，單張圖片大圖顯示，這里肯定也限制了最大高度或者寬度。大于一張圖片則以正方形顯示，一共顯示9張圖，九宮格，多了就不排...

ghnor 2019-08-30 12:56 評論0 收藏0
小程序·云開發(fā)實戰(zhàn)實戰(zhàn) - 迷你微博

摘要：根據(jù)上一小節(jié)的主要信息，我們可以初步推斷出一條迷你微博在云數(shù)據(jù)庫的里是這樣存儲的先來看。 0. 前言本文將手把手教你如何寫出迷你版微博的一行行代碼，迷你版微博包含以下功能： Feed 流：關注動態(tài)、所有動態(tài) 發(fā)送圖文動態(tài) 搜索用戶關注系統(tǒng) 點贊動態(tài) 個人主頁使用到的云開發(fā)能力：云數(shù)據(jù)庫云存儲云函數(shù) 云調用沒錯，幾乎是所有的云開發(fā)能力。也就是說，讀完這篇實戰(zhàn)，你就相...

caozhijian 2019-08-26 10:19 評論0 收藏0
廣告商業(yè)形態(tài)與應用架構

摘要：整合起來，這就是平臺廣告商業(yè)形態(tài)的市場形態(tài)平衡用戶服務體驗廣告主實質訴求及平臺的最大營收三方關系，追求各自最大收益。文章目錄廣告商業(yè)形態(tài)深思廣告到底是什么？互...

kel 2021-11-16 11:44 評論0 收藏0
webpack學習筆記

摘要：配置完成后就可以使用來打包代碼了。值得注意的是會刪除所有無作用代碼也就是說那些包裹在這些全局變量下的代碼塊都會被刪除這樣就能保證這些代碼不會因發(fā)布上線而泄露。默認會從項目的根目錄下引入這些文件。命令使用 npm install webpack -g 作為全局安裝, 在任意目錄使用 npm install webpack --save-dev 作為項目依賴安裝 np...

mylxsw 2019-08-21 10:36 評論0 收藏0