Pexels 调用示例

最新推荐文章于 2024-06-20 17:15:48 发布

林万程

最新推荐文章于 2024-06-20 17:15:48 发布

阅读量566

点赞数

文章标签： html javascript js jquery

本文链接：https://blog.csdn.net/LinWanCheng/article/details/116332925

版权

2021年5月1日直播粉丝提的要求，搞了个示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>PexelsTest</title>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>

<!-- 需要预览才能看到 -->
<!-- 复制到腾讯云开始 -->

<style>
  table {
    border-collapse: collapse;
  }

  th, td {
    border: 1px solid lightgray;
    padding-left: 5px;
    padding-right: 5px;
  }
</style>

<table>
  <tbody id="img">
  </tbody>
</table>
These pictures are from www.pexels.com

<script>
  $.ajax({
    type: "GET",
    url: "https://api.pexels.com/v1/search?query=people",
    dataType: "json",
    beforeSend: function (request) {
      request.setRequestHeader("Authorization", "563492ad6f917000010000013471c5bdbed94f4191289c92c5c828cb");
    },
    success: function (result) {
      let photos = result.photos;
      if (photos === undefined) {
        return;
      }
      let colNum = 3;
      let col = 1;
      for (let i = 0; i < photos.length; i++) {
        let img = $("#img");

        if (col === 0) {
          img.append('<tr>');
        }

        let url = photos[i].src.small;
        img.append('<td><img alt="" src="' + url + '"/></td>');

        if (col === colNum) {
          img.append('<tr>');
          col = 0;
        }
        col++;
      }
    }
  });
</script>

<!-- 复制到腾讯云结束 -->

</body>
</html>