SOURCE

var oText = document.getElementById('value')
    var oUl = document.getElementById('content')
    var aLi = oUl.getElementsByTagName('li')
    var timer = 0
    oText.value = ~~(Math.random() * 90) + 10
      // 绑定代理元素 form 的点击事件
    document.getElementById('wrap').addEventListener('click', function(event) {
      while (timer > 0) {
        clearTimeout(timer)
        timer--
      }
      var val = +oText.value
      var li = document.createElement('li')
      var firstLeft = oUl.firstElementChild ? parseInt(oUl.firstElementChild.style.left) : 5
      var lastLeft = oUl.lastElementChild ? parseInt(oUl.lastElementChild.style.left) : -20
        // 创建待添元素
      li.style.height = `${val*2}px`
      li.style.backgroundColor = `rgba(${~~(Math.random()*255)}, ${~~(Math.random()*255)}, ${~~(Math.random()*255)}, .3)`
        // 触发事件的元素判断
        // 左侧移除元素
      if (event.target.id === 'shift') {
        timer = setTimeout(function() {
          oUl.removeChild(oUl.firstElementChild)
          setLeft(aLi)
        }, 500)
        oUl.firstElementChild.style.opacity = 0
        oUl.firstElementChild.style.left = `${firstLeft-50}px`
        cleanShadow(aLi)
          //右侧移除元素
      } else if (event.target.id === 'pop') {
        timer = setTimeout(function() {
          oUl.removeChild(oUl.lastElementChild)
        }, 500)
        oUl.lastElementChild.style.opacity = 0
        oUl.lastElementChild.style.left = `${lastLeft+50}px`
        cleanShadow(aLi)
          //排序
      } else if (event.target.id === 'sort') {
        var loop = aLi.length - 1
        let count = 0
        for (let i = 0; i < loop; i++) {
          for (let j = 0; j < loop - i; j++) {
            timer = setTimeout(function() {
              clearTimeout(timer)
              cleanShadow(aLi)
              aLi[j].style.boxShadow = `0 0 2px 2px maroon`
              aLi[j + 1].style.boxShadow = `0 0 2px 2px maroon`
              if (parseInt(aLi[j].style.height) > parseInt(aLi[j + 1].style.height)) {
                oUl.insertBefore(aLi[j + 1], aLi[j])
                aLi[j].style.left = `${5+25*j}px`
                aLi[j + 1].style.left = `${5+25*(j+1)}px`
              }
            }, 500 * count++)
          }
        }
        setTimeout(cleanShadow, 500 * count, aLi)
        //判断数字是否合法
      } else if (val > 100 || val < 10) {
        alert('请输入 10 ~ 100 之间的数字')
          //判断列表长度是否合法
      } else if (aLi.length < 60) {
        //左侧添加元素
        if (event.target.id === 'unshift') {
          li.style.left = `${firstLeft-50}px`
          li.style.opacity = 0
          oUl.insertBefore(li, oUl.firstElementChild)
          setTimeout(function() {
            oUl.firstElementChild.style.left = '5px'
            oUl.firstElementChild.style.opacity = 1
          }, 0)
          setTimeout(function() {
            setLeft(aLi)
          }, 500)
          cleanShadow(aLi)
          //右侧添加元素
        } else if (event.target.id === 'push') {
          li.style.left = `${lastLeft+75}px`
          li.style.opacity = 0
          oUl.appendChild(li)
          setTimeout(function() {
            oUl.lastElementChild.style.left = `${lastLeft+25}px`
            oUl.lastElementChild.style.opacity = 1
          }, 0)
          cleanShadow(aLi)
        }
      } else {
        alert('队列元素已经超过上限 60。')
      }
      oText.value = ~~(Math.random() * 90) + 10
    })
    // 重新计算列表所有元素的 left 值
    function setLeft(items) {
      [].forEach.call(items, function(it, index) {
        it.style.left = `${5+25*index}px`
      })
    }
    // 清楚列表影子
    function cleanShadow(items) {
      [].forEach.call(items, function(it) {
        it.style.boxShadow = 'none'
      })
    }

<input id="value" type="number" autocomplete="off" required>
    <hr>
    <div id="wrap">
      <button id="unshift">左侧入</button>
      <button id="push">右侧入</button>
      <button id="shift">左侧出</button>
      <button id="pop">右侧出</button>
      <button id="sort">排序</button>
    </div>
    <ul id="content">
    </ul>

#content {
      margin: 10px;
      padding: 0;
      position: relative;
      top: 300px;
      left: 60px;
    }
    
    #content li {
      list-style: none;
      width: 20px;
      border: 1px solid maroon;
      background-color: aqua;
      transition: all .5s ease-in-out;
      position: absolute;
      bottom: 0;
    }