feat: images 支持图集排列方式

docs/zh-CN/components/images.md

@@ -60,6 +60,33 @@ order: 53
 }
 ```
 
+图集排列方式，通过sortType字段调整布局方式`'l-t-2m'| 'l-b-2m'| 'l-2m-2s' | 'rt-4m' | 'lt-4m'| 'lb-4m' | 'lb-6s' | 'lb-rb-3m';`
+可以通过改变width和height来调整图片大小。默认宽度是800，高度是450。
+![排序样式](../../../examples/static/sortType.png)
+
+```schema
+{
+  "type": "page",
+  "data": {
+    "imageList": [
+      "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80",
+      "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692942/d8e4992057f9.jpeg@s_0,w_216,l_1,f_jpg,q_80",
+      "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693148/1314a2a3d3f6.jpeg@s_0,w_216,l_1,f_jpg,q_80",
+      "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693379/8f2e79f82be0.jpeg@s_0,w_216,l_1,f_jpg,q_80",
+    ]
+  },
+  "body": [
+    {
+      "type": "images",
+      "sortType": "l-t-2m",
+      "width":"200",
+      "height":"112.5",
+      "source": "${imageList}"
+    },
+  ]
+}
+```
+
 ## 值格式
 
 除了支持纯文本数组以外，也支持对象数组，如：

examples/components/Index.jsx

@@ -1,16 +1,43 @@
 export default {
-  type: 'page',
-  title: '标题',
-  remark: {
-    title: '标题',
-    body: '这是一段描述问题，注意到了没，还可以设置标题。而且只有点击了才弹出来。',
-    icon: 'question-mark',
-    placement: 'right',
-    trigger: 'click',
-    rootClose: true
+  "type": "page",
+  "data": {
+    "images": [
+      {
+        "image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80",
+        "src": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg",
+        "a": "aaa1",
+        "b": "bbb1"
+      },
+      {
+        "image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692942/d8e4992057f9.jpeg@s_0,w_216,l_1,f_jpg,q_80",
+        "src": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692942/d8e4992057f9.jpeg",
+        "a": "aaa2",
+        "b": "bbb2"
+      },
+      {
+        "image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693148/1314a2a3d3f6.jpeg@s_0,w_216,l_1,f_jpg,q_80",
+        "src": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693148/1314a2a3d3f6.jpeg",
+        "a": "aaa3",
+        "b": "bbb3"
+      },
+      {
+        "image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693379/8f2e79f82be0.jpeg@s_0,w_216,l_1,f_jpg,q_80",
+        "src": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693379/8f2e79f82be0.jpeg",
+        "a": "aaa4",
+        "b": "bbb4"
+      },
+      {
+        "image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693566/552b175ef11d.jpeg@s_0,w_216,l_1,f_jpg,q_80",
+        "src": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693566/552b175ef11d.jpeg",
+        "a": "aaa5",
+        "b": "bbb5"
+      }
+    ]
   },
-  body: '内容部分. 可以使用 \\${var} 获取变量。如: `\\$date`: ${date}',
-  aside: '边栏部分',
-  toolbar: '工具栏',
-  initApi: '/api/mock2/page/initData'
-};
+  "body": {
+    "type": "images",
+    "sortType": "l-t-2m",
+    "source": "${images}",
+    "enlargeAble": true
+  }
+}

packages/amis-ui/scss/components/_images.scss

@@ -205,3 +205,10 @@
 .Image-view-icon {
   content: var(--image-image-normal-icon);
 }
+
+.l-t-2m{
+  position: relative;
+}
+
+
+