# PhotoGallery ![](https://i.imgur.com/OBFUZM0.jpg) 手機上: ![](https://i.imgur.com/UPEsyXI.png) ## <font color="#48C9B0">**Scrolling loading**</font> &ldquo;接近&rdquo;頁面底部滾動時載入更多內容,以及底部placeholder的icon在loding狀態時才顯示在頁面上。 ![](https://i.imgur.com/zPhxzFs.png) ![](https://i.imgur.com/UtET4i9.png) 判斷畫面有沒有被Image填滿,若是沒有填滿就繼續載入下一批 ``` /*滾動區域底部佔整個畫面的10%以下*/ if(this.documentHeight()-this.windowHeight()-this.scrollTop() < this.windowHeight()*0.1 && !this.bottom) { this.postData(); } ``` ![](https://i.imgur.com/IRdqrdH.png) ## <font color="#48C9B0">**Scroll EventListener**</font> ``` 判斷底部距離 nearToBottom = 50 /*滾動區域高度px*/ if(this.scrollTop() + this.windowHeight() >= (this.documentHeight() - nearToBottom)) { this.loadImage(); } ``` ``` 判斷是否滾動到頁面底部(資料全部載入) if(page == floor(response.total / pageSize)) return true else return false ``` ## <font color="#48C9B0">**Hovering Effect**</font> ![](https://i.imgur.com/JXdkaOM.png) ## <font color="#48C9B0">**留言編輯功能**</font> ![](https://i.imgur.com/Qq9Eihx.png) ## <font color="#48C9B0">**詳細資料**</font> ![](https://i.imgur.com/kCE0Jjs.png) ![](https://i.imgur.com/poSDCWu.png) ![](https://i.imgur.com/hZjVrnW.png) ![](https://i.imgur.com/NHXcNpi.png) ## 資料權限設定介面設計 基本需求必須要有項目資訊、設定繼承選項、預設權限設定、個別權限設定。 ![](https://i.imgur.com/EjAmqtR.png) ## 資料分享設定介面設計 ![](https://i.imgur.com/eWjVMhy.png)