javascript - 在 SCSS 中动态堆叠图像

Question

我想在 SCSS 中创建以下布局:

由于图像具有动态数字，它可以是 4,5 或 2 个图像，我无法对负顶部或 translateY 属性进行硬编码。所以我需要在 SCSS 中使用一个 foreach 循环，这样我就可以为这些图像分配不同的顶部。是否可以在 SCSS 中创建这样的布局，或者我需要使用 JS 吗？

这就是我目前拥有的，如你所见，我只能移动第二个元素，第三个元素已经需要 translateY(-100%)

.layers__img {
  position: relative;
  top: 0;
}
.layers__img:not(:first-child) {
  transform: translateY(-50%);
  transition: transform 0.5s ease-in;
}

<div class="layers">
            <div class="layers__img" id="layer-1">
            <img src="https://placeimg.com/640/480/any">
        </div>
            <div class="layers__img" id="layer-2">
            <img src="https://placeimg.com/640/480/any">
        </div>
            <div class="layers__img" id="layer-3">
            <img src="https://placeimg.com/640/480/any">
        </div>
    </div>

Answer 1

试试下面这个:

let layers = $('.layers__img');
$.each( layers, function( key, value ) {
  var percent = 50;
  if(key != 0) {
    $('img',value).css('transform', 'translateY(-'+percent * key+'%)');
  }
});

.layers__img {
  position: relative;
  top: 0;
}
.layers__img:not(:first-child) {
  transition: transform 0.5s ease-in;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="layers">
        <div class="layers__img" id="layer-1">
            <img src="https://placeimg.com/640/480/any" width="100px">
        </div>
        <div class="layers__img" id="layer-2">
            <img src="https://placeimg.com/640/480/any"  width="100px">
        </div>
        <div class="layers__img" id="layer-3">
            <img src="https://placeimg.com/640/480/any"  width="100px">
        </div>
        <div class="layers__img" id="layer-3">
            <img src="https://placeimg.com/640/480/any"  width="100px">
        </div>
        <div class="layers__img" id="layer-3">
            <img src="https://placeimg.com/640/480/any"  width="100px">
        </div>
 </div>