feeds流中的图片

LuDongWei 发布于2019-08-19 18:04 / 3068人阅读

摘要：先来看看常见的产品中的流中的布局朋友圈纯客户端的流，单张图片大图显示，这里肯定也限制了最大高度或者宽度。兴趣部落兴趣部落的图片很简单粗暴，之间采用了的方式，不管多图还是单图，统一正方形显示。

先来看看常见的产品中的feeds流中的布局：

1、朋友圈

纯客户端的feeds流，单张图片大图显示，这里肯定也限制了最大高度或者宽度。大于一张图片则以正方形显示，一共显示9张图，九宫格，多了就不排列了。

2、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的位置，还有裁剪的方式，一般也就居中显示了。

3、兴趣部落

兴趣部落的图片很简单粗暴，之间采用了background-image的方式，不管多图还是单图，统一正方形显示。

4、淘宝社区

下面是淘宝客户端的截图，不知道内部的实现是原生还是web页面，其图片的布局也是和兴趣部落一致，多图单图显示方式一样。

总结以上几点，在feeds流中通常会遇到这几种常见的图片布局：

1、宽高比例协调，固定最大宽高度，宽高等比缩放


.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、宽高比例不协调，局部显示

利用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流中的展示方法，和朋友圈一样。
但我们的后台服务并没有返回图片的宽高啊，展示当然没有问题。

但这样的问题是，由于不知道宽高，所有单张图片的显示方式都要等到图片下载下来才能知道，因为那时候才知道宽高比。这样的结果就是页面回流，对性能的影响特别严重：

可现实就是后台目前还无法提供啊，真是一万匹草泥马在奔腾，后来就这样迂回来曲线救国。
1、前端上传时计算图片的宽高；
2、后台CGI接收后和图片地址一起存储起来；
3、取feeds流的接口不变，前端从url解析出宽高。
在用FileReader加载完图片后，用img的两个属性就能获取到原始的高宽了，也没有什么技术瓶颈。

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

纵观上面的几种布局方式，单、多张图片的实现最简单，也不需要知道宽高，但显得比较单一，单张图片展示出来的信息较少，而且从视觉角度讲，留有较大空白，图片信息展示的比较少。

如果将单张图片放大，布局显得紧凑，图片细节多，对于不关心的图片，可以省去二次点击查看，就类似朋友圈的feeds流，但两张图的时候与三张以上的图片外框元素一样大小，感觉有点小气，也可能是局限于作者头像，不能放的过大。而游戏圈原样照搬朋友圈的就并不太合适，两个是不同的布局。

个人还是倾向于看大图，结合兴趣部落的多图和朋友圈的单图展示方式。

云服务器 GPU云服务器识别图片中的文字 feeds Feed excel提取图片中的文字内容

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79160.html

feeds流中的图片

摘要：先来看看常见的产品中的流中的布局朋友圈纯客户端的流，单张图片大图显示，这里肯定也限制了最大高度或者宽度。兴趣部落兴趣部落的图片很简单粗暴，之间采用了的方式，不管多图还是单图，统一正方形显示。先来看看常见的产品中的feeds流中的布局： 1、朋友圈纯客户端的feeds流，单张图片大图显示，这里肯定也限制了最大高度或者宽度。大于一张图片则以正方形显示，一共显示9张图，九宫格，多了就不排...

ghnor 2019-08-30 12:56 评论0 收藏0
小程序·云开发实战实战 - 迷你微博

摘要：根据上一小节的主要信息，我们可以初步推断出一条迷你微博在云数据库的里是这样存储的先来看。 0. 前言本文将手把手教你如何写出迷你版微博的一行行代码，迷你版微博包含以下功能： Feed 流：关注动态、所有动态发送图文动态搜索用户关注系统点赞动态个人主页使用到的云开发能力：云数据库云存储云函数云调用没错，几乎是所有的云开发能力。也就是说，读完这篇实战，你就相...

caozhijian 2019-08-26 10:19 评论0 收藏0
广告商业形态与应用架构

摘要：整合起来，这就是平台广告商业形态的市场形态平衡用户服务体验广告主实质诉求及平台的最大营收三方关系，追求各自最大收益。文章目录广告商业形态深思广告到底是什么？互...

kel 2021-11-16 11:44 评论0 收藏0
webpack学习笔记

摘要：配置完成后就可以使用来打包代码了。值得注意的是会删除所有无作用代码也就是说那些包裹在这些全局变量下的代码块都会被删除这样就能保证这些代码不会因发布上线而泄露。默认会从项目的根目录下引入这些文件。命令使用 npm install webpack -g 作为全局安装, 在任意目录使用 npm install webpack --save-dev 作为项目依赖安装 np...

mylxsw 2019-08-21 10:36 评论0 收藏0