题目

答案

一、有穷 36种

首先不考虑顺序，先考虑有多少模版数，总数 = 模版数 x 每种模版的全排列数

1. 每一种模版经过排序后都会有3!种情况，也就是6种。
2. 模版数6种
3. 一共 36种

二、数据结构

我可以发现这个排版用grid布局可以很轻松的实现，我们可以参考grid布局的属性grid-template-areas。用下面这种结构来表示：

//与后端约定数据格式为json或者Object
//列如：
{
  temp: ['image', 'list', 'text'], //数组记录位置
  image: {}, //image 信息
  list: [], //list 信息
  text: {}, //text 信息
};

三、使用grid布局

这样的话就可以通过grid-template-areas这一个属性进行控制排版，而且还可以对每一个item进行设置gap、width、height、等属性来控制内部的样式

Last

1. 即使后端不按照我们想要的结构给我们数据，也可以写一个工具函数转化成这种方便我们前端控制的结构；

2. 我们只需要把这些封装进一个组件，入参就是答案二的数据，这么做后续的扩展性也是很不错的。

水平有限，若有不对的地方或者更优的方案还望指正