微信小程序——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

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

微信小程序 View：flex 布局
微信小程序 View 支持两种布局方式:Block 和 Flex 所有 View 默认都是 block 要使用 flex 布局的话需要显式的声明: display:flex; 下面就来介绍下微信小程序 ...
零基础也能学会的微信小程序制作横向滚动布局
零基础也能学会的微信小程序制作横向滚动布局准备工作: 微信开发者工具 APPID或测试号创建一个JavaScript基本框架(如下图) 动手做起来吧~ index.wxml 最终效果: <! ...
java webpack web项目_官方出品，微信小程序和 Web 端同构解决方案——kbone
介绍最近在琢磨一些小程序开发和移动web开发,偶然间在Github上看到了这样一个项目--kbone,一个致力于微信小程序和 Web 端同构的解决方案.微信小程序的底层模型和 Web 端不同,我们想 ...
微信小程序_(组件)flex布局
小程序建议使用flex布局进行排版 flex是一个盒装弹性布局 flex是一个容器,所有子元素都是他的成员定义布局:display:flex flex容器的属性: 一.flex-direction: ...
微信小程序最常用的布局——Flex布局
最近在学习微信小程序,在设计首页布局的时候,新认识了一种布局方式display:flex 1 .container { 2 display: flex; 3 flex-direction: colum ...
微信小程序开发常见warnings警告解决方案
在小程序开发过程中,只要稍不注意代码细节,就会出现很多 warnings 警告,虽然在对小程序的运行并没有什么影响,但是作为一名严谨的程序猿,是不允许它们存在的. 下面我将从我的实际项目开发过程中碰到 ...
微信小程序页面元素居中布局
1. 小程序页面布局开发需求: 活动类型的小程序,要求:(1)页面全屏(2)页面中内容居中布局 2.小程序已知内容 (1)设计稿的尺寸为:750*1630 (2)设程序页面设置全屏模式的方法: &qu ...
[wx·part]微信小程序通过positon:absolute布局解决元素浮动显示后，如何设置显示位置问题
前言: 今天决定"从操旧业"了,感觉自己被隔离世外一样.今天遇到一个严重的手机自适应问题,在开发微信小程序时,在微信开发者工具中通过一些绝对的写法.微信开发者工具上显示正确,但是在 ...
微信小程序获取用户信息更新解决方案
微信小程序获取用户头像和昵称更新了,以下代码是兼容旧版本微信和新版本微信的解决方案,仅供参考直接上代码 <template><view ...

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

一、宫格式布局

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

最新文章

热门文章