手写一个h5相册这是一个简易的js h5相册。可以用来陈列自己喜欢的照片。并且用于各大场合的PPT展示，只需要Web

<html>
<script src="js/jquery.min.js"></script>
<script>
  var bcfg = {
    "domain": "http://192.168.1.107:7008",
    "wsDomain": "ws://192.168.1.107:7008",
    "imgDomain": "http://192.168.1.107:7001"  //iis签名图片
  };


</script>
<style>
  ::-webkit-scrollbar {
    display: none;
  }

  .photo {
    position: absolute;
    background-color: transparent;

  }

  .left-125 {
    left: 125px;
  }

  .top--10 {
    top: -10%
  }

  .box1-1 {
    width: 300px;
  }

  .box1-2 {
    width: 500px;
  }

  .box1-3 {
    width: 600px;
  }

  .big {
    padding: 12px;
    padding-bottom: 24px;
    z-index: 1000;
  }

  .small {
    padding: 5px;
    padding-bottom: 12px;
    z-index: 20;
  }

  .prepared {
    left: -200%
  }

  .box1-div1 {
    /* -webkit-transform: rotate(-7deg); */
    /* Safari 和 Chrome */
    padding: 5px;
    padding-bottom: 14px;
    z-index: 1;
    animation-name: box1-div1;
    animation-duration: 8s;
    animation-direction: alternate;
  }

  .box1-div2 {
    /* -webkit-transform: rotate(-2deg); */
    /* Safari 和 Chrome */
    padding: 12px;
    padding-bottom: 24px;
    animation-name: box1-div2;
    animation-duration: 8s;
    animation-direction: alternate;
  }

  .box1-div3 {
    /* -webkit-transform: rotate(3deg); */
    /* Safari 和 Chrome */
    padding: 12px;
    padding-bottom: 24px;
    top: 30%;
    left: 40%;
    animation-name: box1;
    animation-duration: 8s;
  }
</style>
<script>

</script>

<body
  style="height:100%;width:100%;background-image:url('./img/bg.jpg');background-repeat:no-repeat;background-size:100% 100%;">
  <img style="position: fixed;top:-5%;width:100%;z-index: 9999;" src="img/title2.png">

  <div id="takePhoto" class="big photo"
    style="background-color: white;display:none;top:20%;left:26%;position: fixed;z-index: 9999;">
    <img src="">
    <script>
      function photo() {

      }

    </script>
  </div>
  <div class="box1">
    <!-- <div class="photo box1-div1">
          <img class="box1-1" src="img/box1-1.jpg">
    </div>
          <div class="photo  box1-div2">
            <img class="box1-2" src="img/box1-2.jpg">
    </div>
            <div class="photo  box1-div3">
              <img class="box1-3" src="img/box1-3.jpg">
    </div> -->
  </div>
  <script>
    let model = [];
    let hasShow = false;
    var toStart = setInterval(() => {
      $.ajax({
        async: false,
        type: "GET",
        url: bcfg.domain + "/screen-server/api/sign/list",
        dataType: "json",
        contentType: "application/json",
        error: function (xhr, err, errInfo) {
        },
        success: function (data) {
          console.log("==>", data)
          if (data.result) {
            model = data.model;
            if (model.length == 0) {

            } else {
              toShow()
              hasShow = true;
              clearInterval(toStart);
            }
            console.log(data.model);
            jsObj = data;
          }
          else {
            alert(data.message);
          }
        }
      });

    }, 1000)

    function toShow() {
      let srcs = [];
      let length = parseInt(Math.floor(Math.random() * 4 + 3)) > model.length ? model.length : parseInt(Math.floor(Math.random() * 4 + 3))
      console.log(length)
      let numList = [];
      for (let i = 0; i < length; i++) {
        let srand = parseInt(Math.floor(Math.random() * model.length))
        if (!numList.find(item => item == srand)) {
          numList.push(srand);
        } else {
          i--;
        }
      }
      numList.pop();
      numList.push(0);
      numList.forEach(item => {
        srcs.push(bcfg.imgDomain + model[item].photo);
      })
      // let srcs = ['img/box1-1.jpg', 'img/box1-2.jpg', 'img/box1-3.jpg', 'img/box1-1.jpg', 'img/box1-2.jpg'];
      //let srcs = ['img/box1-1.jpg'];

      let tos = ['top', 'bottom', 'right', 'left']
      let outTo = ['top', 'bottom', 'right', 'left']
      let widths = [200, 300];
      let imgs = [];
      let num = Math.floor(Math.random() * 4);
      let tnum = Math.floor(Math.random() * 2);
      let to = tos[num]
      let ot = ''
      let first = true;
      let lefts = [200, 400, 600, 800, 1000]
      switch (to) {
        case 'top':
          ot = outTo.filter(item => item != 'top' && item != 'bottom')[tnum];
          break;
        case 'bottom':
          ot = outTo.filter(item => item != 'top' && item != 'bottom')[tnum];
          break;
        case 'right':
          ot = outTo.filter(item => item != 'right' && item != 'left')[tnum];
          break;
        case 'left':
          ot = outTo.filter(item => item != 'right' && item != 'left')[tnum];
          break;
      }

      init(srcs, to, ot);

      function init(src, to, ot) {
        srcs.forEach((src, i) => {
          let inFrom = 0
          let inNow = 0;
          let target = 0;
          let left = 100
          let top = 100
          let wid = 0

          let className = "";
          if (to == 'left' || to == 'top') {
            inFrom = 100;
            inNow = 100;
          }
          else {
            inFrom = -100;
            inNow = -100;
          }
          if (ot == 'left' || ot == 'top') {
            outTo = -120;
          } else {
            outTo = 120;
          }

          if (i == 0) {
            wid = 700;
            left = Math.floor(Math.random() * 30 + 30); // 30-60
            top = 3;
            className = "big"
          }
          else if (i == 1) {
            wid = 400;
            left = Math.floor(Math.random() * 10);// 0-30
            top = Math.floor(Math.random() * 10); // 0-30
            className = "small"
          }
          else if (i == 2) {
            wid = 400;
            left = Math.floor(Math.random() * 10);// 0-30
            top = Math.floor(Math.random() * 10 + 45); // 45-75
            className = "small"
          }
          else if (i == 3) {
            wid = 400;
            left = Math.floor(Math.random() * 10 + 45);// 0-30
            top = Math.floor(Math.random() * 10); // 45-60
            className = "small"
          }
          else if (i == 4) {
            wid = 400;
            left = Math.floor(Math.random() * 10 + 45);// 0-30
            top = Math.floor(Math.random() * 10 + 45); // 45-60
            className = "small"
          }
          else if (i == 5) {
            wid = 400;
            left = Math.floor(Math.random() * 10 + 70);// 0-30
            top = Math.floor(Math.random() * 10); // 45-60
            className = "small"
          }
          else if (i == 6) {
            wid = 400;
            left = Math.floor(Math.random() * 10 + 70);// 0-30
            top = Math.floor(Math.random() * 10 + 70); // 45-60
            className = "small"
          }

          $(".box1").append("<div style='display:none;' class='photo'><img style='width:" + wid + "px' src=''></div>")
          $(".box1>div:last").css("left", left + "%");
          $(".box1>div:last").css("top", top + "%");
          $(".box1>div:last").addClass(className);
          function o(item) {
            //  item.css("display", "block");
          }

          if (to == 'left' || to == 'right') {
            target = left;
          }
          else {
            target = top;
          }
          console.log($(".box1>div:last").css("left"))
          var random =
            imgs.push({
              selector: $(".box1>div:last"),
              left: left,
              img: src,
              top: top,
              inFrom: inFrom,
              inNow: inNow,
              inTo: target,
              transform: Math.floor(Math.random() * 21) - 10,
              outFrom: left,
              outNow: left,
              outTo: outTo,
              hasIn: false,
              toOut: false,
            })

        })

      }

      let nowOt = 'right';
      let count = 0;

      ot = 'right';
      to = 'right';
      setInterval(() => {
        if (nowOt == 'right') {
          ot = 'right';
          to = 'right';
          count++;
        }
        else {
          ot = 'bottom';
          to = 'bottom';
          count++;
        }
        if (count == 2) {
          if (nowOt == 'right') {
            nowOt = 'bottom';
            count = 0;
          } else if (nowOt == 'bottom') {
            nowOt = 'right';
            count = 0;
          }
        }
        imgs = []
        srcs = [];
        let length = parseInt(Math.floor(Math.random() * 4 + 3)) > model.length ? model.length : parseInt(Math.floor(Math.random() * 4 + 3))
        let numList = [];
        for (let i = 0; i < length; i++) {
          let srand = parseInt(Math.floor(Math.random() * model.length))
          if (!numList.find(item => item == srand)) {
            numList.push(srand);
          } else {
            i--;
          }
        }
        numList.pop();
        numList.push(0);
        numList.forEach(item => {
          srcs.push(bcfg.imgDomain + model[item].photo);
        })
        init(srcs, ot, to);
        imgs.forEach(item => {
          Move(item, to, ot)
        })
      }, 6000)
    }



    function waitToOut(item) {
      var intervalToOut = setInterval(() => {
        item.transform += 0.001;
        item.selector.css({ transform: "rotate(" + item.transform + "deg)" });
        if (item.hasIn) {
          setTimeout(() => {
            item.toOut = true;
          }, 2000);
          clearInterval(intervalToOut);
        } else {
          item.transform += 0.001;
          item.selector.css({ transform: "rotate(" + item.transform + "deg)" });
        }
      }, 10);
    }
    // 
    function MoveIn(item, to) {
      item.selector.css("dislay", "block");
      // item.selector.removeClass("prepared")
      if (to == 'top') {
        var intervalIn = setInterval(() => {
          if (item.inNow > item.inTo) {
            item.inNow -= (item.inFrom - item.inTo) / 400;
            item.selector.children("img").attr("src", item.img);
            item.selector.css("top", item.inNow + "%")

            item.selector.css("background-color", "white");
            item.selector.css("box-shadow", "2px 2px 5px grey");
            item.selector.css("display", "block")
          } else {
            item.hasIn = true;
            clearInterval(intervalIn)
          }
        }, 10)
      } else if (to == 'bottom') {
        var intervalIn = setInterval(() => {
          if (item.inNow < item.inTo) {
            item.inNow += (item.inTo - item.inFrom) / 400;
            item.selector.children("img").attr("src", item.img);
            item.selector.css("top", item.inNow + "%")
            item.selector.css("background-color", "white");
            item.selector.css("box-shadow", "2px 2px 5px grey");
            item.selector.css("display", "block")
          } else {
            item.hasIn = true;
            clearInterval(intervalIn)
          }
        }, 10)
      } else if (to == 'right') {
        var intervalIn = setInterval(() => {
          if (item.inNow < item.inTo) {
            item.inNow += (item.inTo - item.inFrom) / 400;
            item.selector.children("img").attr("src", item.img);
            item.selector.css("left", item.inNow + "%")
            item.selector.css("background-color", "white");
            item.selector.css("box-shadow", "2px 2px 5px grey");
            item.selector.css("display", "block")
          } else {
            item.hasIn = true;
            clearInterval(intervalIn)
          }
        }, 10)
      } else if (to == 'left') {
        var intervalIn = setInterval(() => {
          if (item.inNow > item.inTo) {
            item.inNow -= (item.inFrom - item.inTo) / 400;
            item.selector.children("img").attr("src", item.img);
            item.selector.css("left", item.inNow + "%")
            item.selector.css("background-color", "white");
            item.selector.css("box-shadow", "2px 2px 5px grey");
            item.selector.css("display", "block")

          } else {
            item.hasIn = true;
            clearInterval(intervalIn)
          }

        }, 10)
      }
    }
    // outTo 在 向下 或者 向右时，必须是正数
    function MoveOut(item, to) {
      if (to == 'right') {
        var intervalOut = setInterval(() => {
          if (item.outNow < item.outTo && item.toOut) {
            item.outNow += (item.outTo - item.outFrom) / 200;
            item.selector.css("left", item.outNow + "%")
            item.selector.css("background-color", "white");
            item.selector.css("box-shadow", "2px 2px 5px grey");
          }
          else if (item.outNow >= item.outTo) {
            item.selector.css("display", "none");
            item.selector.remove();
            clearInterval(intervalOut);
          }
        }, 10)
      }
      else if (to == 'left') {
        var intervalOut = setInterval(() => {
          if (item.outNow > item.outTo && item.toOut) {
            item.outNow -= (item.outFrom - item.outTo) / 200;
            item.selector.css("left", item.outNow + "%")
            item.selector.css("background-color", "white");
            item.selector.css("box-shadow", "2px 2px 5px grey");
          }
          else if (item.outNow <= item.outTo) {
            item.selector.css("display", "none");
            item.selector.remove();
            clearInterval(intervalOut);
          }
        }, 10)
      }
      else if (to == 'top') {
        var intervalOut = setInterval(() => {
          if (item.outNow > item.outTo && item.toOut) {
            item.outNow -= (item.outFrom - item.outTo) / 200;
            item.selector.css("top", item.outNow + "%")
            item.selector.css("background-color", "white");
            item.selector.css("box-shadow", "2px 2px 5px grey");
          }
          else if (item.outNow <= item.outTo) {
            item.selector.css("display", "none");
            item.selector.remove();
            clearInterval(intervalOut);
          }
        }, 10)
      }
      else if (to == 'bottom') {
        var intervalOut = setInterval(() => {
          if (item.outNow < item.outTo && item.toOut) {
            item.outNow += (item.outTo - item.outFrom) / 200;
            item.selector.css("top", item.outNow + "%")
            item.selector.css("background-color", "white");
            item.selector.css("box-shadow", "2px 2px 5px grey");
          }
          else if (item.outNow >= item.outTo) {
            item.selector.css("display", "none");
            item.selector.remove();

            clearInterval(intervalOut);
          }
        }, 10)
      }
    }

    function Move(item, inTo, outTo) {
      MoveIn(item, inTo)
      waitToOut(item);
      MoveOut(item, outTo)
    }

  </script>
  <script>
    //获取唯一编号uuid
    function getUUID() {
      var uuid = new Date().getTime();
      return uuid;
    }
    var username = "bigscreen" + getUUID();

    var websocket = null;
    // 
    var websocketUrl = bcfg.wsDomain + "/screen-server/webSocketServer/" + username;
    //重连定时器
    var reconnectintval = null;
    initWebsocket();
    //初始化websocket
    function initWebsocket() {
      //判断当前浏览器是否支持WebSocket  
      if ('WebSocket' in window) {
        console.log("浏览器支持Websocket");
        websocket = new WebSocket(websocketUrl);
      } else {
        console.log('当前浏览器 Not support websocket');
      }

      //连接成功建立的回调方法  
      websocket.onopen = function () {
        reconnectintval && window.clearInterval(reconnectintval);
        console.log("WebSocket连接成功");
        heartCheck.reset().start();
      }
      //接收到消息的回调方法  
      websocket.onmessage = function (event) {
        if (event.data == "heartBeat") {
          //心跳，不更新到页面
          console.log("接收到心跳：" + event.data);
        } else if (event.data == "updateToScreen") {
          console.log("收到消息：" + event.data);
          $.ajax({
            async: false,
            type: "GET",
            url: bcfg.domain + "/screen-server/api/sign/list",
            dataType: "json",
            contentType: "application/json",
            error: function (xhr, err, errInfo) {
            },
            success: function (data) {
              model = data.model;
              console.log("-->list", model)
              $("#takePhoto").css("display", "block");
              $("#takePhoto>img").attr("src", bcfg.imgDomain + data.model[0].photo);
              setTimeout(() => {
                $("#takePhoto").fadeOut(3000);
              }, 5000);
            }
          });
        }
        heartCheck.reset().start();
      }
      //连接关闭的回调方法  
      websocket.onclose = function () {
        console.log("WebSocket连接关闭");
        // 定时重连
        window.clearInterval(reconnectintval);
        reconnectintval = window.setInterval(initWebsocket, 3000);
      }
      //连接发生错误的回调方法
      websocket.onerror = function () {
        console.log("WebSocket连接发生错误");
      };
      console.log("初始化websocket");
    }



    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。  
    window.onbeforeunload = function () {
      closeWebSocket();
    }
    //关闭WebSocket连接  
    function closeWebSocket() {
      websocket.close();
    }



    //将消息显示在网页上

    function setMessageInnerHTML(innerHTML) {

      document.getElementById('message').innerHTML += innerHTML + '<br/>';

    }

    //心跳检测,每20s心跳一次
    var heartCheck = {
      timeout: 3000,
      timeoutObj: null,
      serverTimeoutObj: null,
      reset: function () {
        clearTimeout(this.timeoutObj);
        clearTimeout(this.serverTimeoutObj);
        return this;
      },
      start: function () {

        var self = this;
        this.timeoutObj = setTimeout(function () {
          //这里发送一个心跳，后端收到后，返回一个心跳消息，
          //onmessage拿到返回的心跳就说明连接正常
          var jsobj = { "to": username, "message": "heartBeat" };

          websocket.send(JSON.stringify(jsobj));

          //console.info("客户端发送心跳:heartBeat");
          self.serverTimeoutObj = setTimeout(function () {//如果超过一定时间还没重置，说明后端主动断开了
            websocket.close();//如果onclose会执行reconnect，我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
          }, self.timeout)
        }, this.timeout)
      }
    }

  </script>


</body>

</html>