by addy 原创文章,欢迎转载,但希望全文转载,注明本文地址。

本文地址:http://www.iamaddy.net/2016/04/feeds-img/

feeds流中的图片

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

1、朋友圈

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

feeds流中的图片

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"); } 

feeds流中的图片

多张图片,这个就更好实现了,用background-image就行,也不用提前知道大小,设置background-position的位置,还有裁剪的方式,一般也就居中显示了。

feeds流中的图片

3、兴趣部落

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

feeds流中的图片

4、淘宝社区

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

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

1、宽高比例协调,固定最大宽高度,宽高等比缩放
					<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; } 

feeds流中的图片

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

feeds流中的图片

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流中的图片

而上图也就是微信游戏圈子的feeds流中的展示方法,和朋友圈一样。

但我们的后台服务并没有返回图片的宽高啊,展示当然没有问题。

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

feeds流中的图片
可现实就是后台目前还无法提供啊,真是一万匹草泥马在奔腾,后来就这样迂回来曲线救国。

1、前端上传时计算图片的宽高;

2、后台CGI接收后和图片地址一起存储起来;

3、取feeds流的接口不变,前端从url解析出宽高。

在用FileReader加载完图片后,用img的两个属性就能获取到原始的高宽了,也没有什么技术瓶颈。

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

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

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

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

本文为原创文章,可能会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,谢谢合作

本文地址:http://www.iamaddy.net/2016/04/feeds-img/

想要打赏?你的鼓励是我前进的动力! addy打赏二维码

关注个人公众号web_lab,不定期更新一些干货~ web_lab公众号