## 一. 組件詳解
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>`由用戶在嗨創平臺中上傳使用
* 圖片組件內所有模塊均可刪除
* 圖片組件內所有模塊均可任意拖拽換位置
* 圖片組件內模塊可以增加
* 圖片組件內模塊可以增加特效，放大，反轉，漸變等
