Unsplash 是一個免費的圖庫，由於他們提供的圖片特別漂亮又提供各種大小，非常受到大家的歡迎。許多網路文章的配圖或是網頁 template 裡面都會使用 Unsplash 的圖片。

Unsplash 直到今年 11 月才推出了官方的 API ，一如他們的免費、開源的理念，這個 API 也是免費的，甚至沒有計算使用的 Rate。當然，使用 API 的時候也必須遵守他們的規範，比方說不能建一個跟 Unsplash 本身核心一樣的圖片下載服務還有必須註明圖片作者跟來源等。

在 Unsplash 首頁 navigation bar 上的 ··· 按鈕裡找到 API/Developers ，就到了 API 頁面

API 首頁上面有個小小的 Your applications 按鈕，點進去可以申請 Application ID 跟 Secret 。

在這邊 Unsplash 為了確保大家都能遵守 API Guidelines ，一開始的 API 請求數量會受到限制。如果想要撤除限制，他會要求你截圖給他們看，證明你有使用 UTM tracking 以及註明圖片來自 Unsplash 以及 Unsplash 的攝影師們。

現在來看看文件：

Unsplash API 也是相當簡單（畢竟本身就是個簡單的服務呀），使用 API 的人可以取得一下資訊：

• 使用者
• 圖片
• 搜尋 Unsplash 資料庫
• 圖集

其中最常遇到的大概就是獲取圖片了吧，比方說，在自己的 App 裡面載入最新的 Unsplash 圖片之類的。
所以我今天也是寫抓圖片的功能。

抓圖的 Request URL 後面接的是 /photos/ ，可以放入以下參數：

• page 頁數 ：抓取 Unsplash 第幾頁的參數，預設是第一頁

• per_page 每頁圖片數量：預設是 10 張

• order_by：可以依照 latest 、oldest、popular 數值排列圖片

  // API Call Request URL 如下

  var url =
  "https://api.unsplash.com/photos/" +
  "?client_id=812193ef71ca946e361ed541979a0cfd91e9419a19235fd05f51ea14233f020a" +
  "&per_page=30";

來實作看看：

var url =
  "https://api.unsplash.com/photos/?client_id=812193ef71ca946e361ed541979a0cfd91e9419a19235fd05f51ea14233f020a&per_page=30";

var utm = "&utm_source=Photo-app&utm_medium=referral";

var container = document.querySelector("#container");
function makeRequest() {
  xhr = new XMLHttpRequest();
  xhr.onload = function() {
    var response = JSON.parse(this.responseText);
    console.log(response)
    }
  };
  xhr.open("GET", url, true);

  xhr.send();
}
makeRequest();

順利的得到一個 Array

現在改寫 xhr.onload 裡的 function，把 array 裡面的圖片物件 loop 出來：

  xhr.onload = function() {
    var response = JSON.parse(this.responseText);
    console.log(response)
    for (var i = 0; i < response.length; i++) {
        var img = document.createElement("img");
        img.setAttribute("src", response[i].urls.small);
        container.appendChild(img);
    };

由於我只想要直的圖片，做了以下改寫：

      if (response[i].height > response[i].width) {
        var img = document.createElement("img");
        img.setAttribute("src", response[i].urls.thumb + utm);
        container.appendChild(img);
      }

最後在 <style> 裡面 給 #container 一個 display: flex; 把圖片排一下。
（非常難得的碰了 CSS)

成果：

Codepen Demo