## 一. 组件详解 1. 图片组件只允许出现图片 2. 所有图片都对应的是个模块，每个模块中仅有一张图片【四.代码示例详解"模块"】 3. 图片组html布局基于Bootstrap栅格布局,每个模块最外层容器一定要有`col-xx-xx`class来自适应手机端 4. 图片组分为规则形与不规则形 I.规则形 > 组件中所有模块一模一样，包括所有CSS，html每个模块全部一样  II.不规则形 > 组件中所有模块可以不相同，包括CSS,html均可以不同  * * * * * ## 二.功能描述 1. 组件的主要目的是将用户上传的喜爱，商用，旅行等图片简单的展示给浏览页面的人 2. 组件可以是可爱，简洁，大气等不同风格 3. 美化页面 * * * * * ## 三.代码规范 * 1.组件最外层容器加入class=**"h5c_zj_imgGroup"**空类别，JS按钮定位识别使用。 * 2.不规则图片组最外层容器另加入class=**"imgGroup-irregular"**。 * 3.图片组所有模块必须在同一个父级容器里。 * 4.每个模块里最外层容器增加 **data-imgGroupMark='this'**属性,并且此层一定要有CSS样式position:relative。 * 5.Transform变形等class加入每个模块里最外层容器（有**data-imgGroupMark='this'**属性的容器）。 * 6.所有图片增加 **onerror**事件。(src为图片地址)。 * 7.所有`<img>`标签与含有 **data-imgGroupMark='this'**属性的容器标签中间，必须含有至少一个`div`，`li`等，包裹容器。 * * * * * ## 四.代码示例 ~~~ <div class="h5c_zj_imgGroup imgGroup-irregular">// **规范1，2所示** <div class="container-fluid"> <div class="row">// **规范3所示** <div class="col-xs-12" data-imgGroupMark="this" style='transform:rotate(9deg)'>//**规范4，5所示** <div>//***规范7所示* <img onerror="javascript:this.src='xx/1.jpg'" src="xx/1.jpg">//**规范6所示** </div>//***规范7所示* </div> <div class="col-xs-12" data-imgGroupMark="this" style='transform:rotate(9deg)'>//**规范4，5所示** <div> <img onerror="javascript:this.src='xx/2.jpg'" src="xx/2.jpg"> </div> </div> //以下一个div则是一个“模块”,图片组由这些模块组成,此示例由三个“模块”组成 <div class="col-xs-12" data-imgGroupMark="this" style='transform:rotate(9deg)'>//**规范4，5所示** <div> <img onerror="javascript:this.src='xx/3.jpg'" src="xx/3.jpg" > </div> </div> </div> </div> </div> ~~~ * * * * * ## 五.补充说明 * 符合规范组件嗨创提供： * 图片组件中`<img>`由用户在嗨创平台中上传使用 * 图片组件内所有模块均可删除 * 图片组件内所有模块均可任意拖拽换位置 * 图片组件内模块可以增加 * 图片组件内模块可以增加特效，放大，反转，渐变等