---
# System prepended metadata

title: PhotoGallery

---


# 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)


