微信小程序——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×tamp=1540378341&app=news_article&utm_source=weixin&iid=47036339180&utm_medium=toutiao_android&group_id=6615718628920656391