原生js写一个日常工作可能会用到的效果（1）有一天运营同事拿了个手机给我看了个效果问我这个好不好做。我看了一下就是几个图

有一天运营同事拿了个手机给我看了个效果问我这个好不好做。我看了一下就是几个图片在下面挤成一坨，然后每次向上滑最上面的展开一个，下面那一坨出来一个。虽然没叫我做，趁着最近有空简单实现了一下

<style>
    #wrap {
        border: 1px solid salmon;
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: absolute;
    }

    #wrap1 {
        /*transform: translateY(1440px);*/
        transition: all 1s;
    }

    .cube {
        width: 100%;
        height: 800px;
        transition: all 1s;
        position: absolute;
        left: 0;
        top: 0;
    }
</style>
```
<body>

<div id="wrap">
    <div id="wrap1">
        <div class="cube" style="background-color: #2f54eb; transform: translateY(0px);"></div>
        <div class="cube" style="background-color: #52c41a; transform: translateY(200px);"></div>
        <div class="cube" style="background-color: #722ed1; transform: translateY(400px);"></div>
        <div class="cube" style="background-color: #87e8de; transform: translateY(600px);"></div>
        <div class="cube" style="background-color: #eb2f96; transform: translateY(800px);"></div>
        <div class="cube" style="background-color: #fadb14; transform: translateY(1000px);"></div>
        <div class="cube" style="background-color: chartreuse; transform: translateY(1200px);"></div>
        <div class="cube" style="background-color: saddlebrown; transform: translateY(1400px);"></div>
        <div class="cube" style="background-color: darkorange; transform: translateY(1600px);"></div>
    </div>
</div>
</body>

let time = 0,
    recordY = null,
    y = 0,
    expandAll = false,
    cubeHeight = 800,
    cubeSmallHeight = 200,
    wrap = document.getElementById("wrap"),
    wrap1 = document.getElementById("wrap1"),
    wh = parseInt(window.getComputedStyle(wrap, null).height),
    h = wh - 3 * cubeSmallHeight, //#wrap1的transform
    cubes = document.querySelectorAll('.cube')
wrap1.setAttribute('style', `transform:translateY(${h}px)`)
wrap1.addEventListener('touchstart', touch, false);
wrap1.addEventListener('touchmove', touch, false);
wrap1.addEventListener('touchend', touch, false);

function touch(event) {
    switch (event.type) {
        case "touchstart":
            y = Number(window.getComputedStyle(wrap1, null).getPropertyValue("transform").split(',')[5].replace(')', ''));
            recordY = event.touches[0].clientY;
            break;
        case "touchend":
            let endNY = y + event.changedTouches[0].clientY - recordY;
            if (endNY < h && !expandAll) { //如果向上滑，并且没有全部展开
                h -= cubeSmallHeight;
                wrap1.style.transform = `translateY(${h}px)`;
                if (cubes.length - time > 1) {
                    for (let i = 0; i <= time; i++) {
                        cubes[i].style.transform = `translateY(${cubeSmallHeight * i - (cubeHeight - cubeSmallHeight) * (time - i + 1)}px)`
                    }
                    time += 1;
                } else {
                    expandAll = true
                }
            }
            break;
        case "touchmove":
            let clientY = event.touches[0].clientY; //当前手势位置
            let nY = y + clientY - recordY; //正常情况下wrap的Y
            if (nY > h && nY < (cubeHeight - cubeSmallHeight)* time) { // 只有正常情况下y 不比 目前允许的 位置 偏上
                wrap1.style.transform = `translateY(${nY}px)`
            }
            event.preventDefault();
            break;
    }
}

这样就完成了。但如果图片长度不一样就更麻烦一点。不知道有没有更好的方法。