微信小程序——Feed流图片布局解决方案

三种Feed流中的图片布局:宫格式布局、拼图式布局、瀑布流式布局。

一、宫格式布局

宫格式布局也就是九宫格布局,多用在社交类的APP中,九宫格图片不仅能放进去很多内容,同时也能很好地引起网友的关注。

        

从上面案列可以看出:宫格式图片布局大多用于社交发布动态的Feed流中,虽然他们都采用宫格式的布局,不过当发布的是一张图片,其呈现的状态还是有所差异。

以微信朋友圈为例:

未对屏幕进行区分,但对只上传一张图片进行了特殊的处理,二张或二张以上的图片宽 x 高以150为阀值,二边都大于150时,以较小的一边为基准进行等比缩放。

具体的图片排列情况如下图:

1. 当图片为三张时,3、5位置对调,排成一行:1、2、3;

2. 二张时排一行,1、2,格子大小提前就已经占好位置;

3. 单张图片,如果0.5 < = 宽 / 高 <= 2 时,被限定在1—4格子的范围大小(包括间距),也就是凡是宽高比在这个范围时,最长的那边暂两个格子加间距;

4. 单张图片,宽 / 高 > 2的图片(如全景图),最多占三栏,高最多占一栏(包括间距大小);

5. 单张图片,宽 / 高 < 0.5(如微博长图),高最多占二栏,宽度最小占二栏1/3(包括间距);

更多内容请参考https://www.toutiao.com/a6615718628920656391/?tt_from=weixin&utm_campaign=client_share&wxshare_count=1&timestamp=1540378341&app=news_article&utm_source=weixin&iid=47036339180&utm_medium=toutiao_android&group_id=6615718628920656391

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值