三种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(包括间距);