在以下条件下生成一系列数字

Question

我正在尝试创建多个重叠div的3D图层效果，这些效果似乎与每个div的距离越来越远。如下图所示。

实现3D效果；我正在使用内联css样式向每个div应用右间距和顶部间距。间距将根据存在的div数量而变化。

我需要为每个div生成正确的位置和最高位置编号，以实现此效果，具体取决于div的数量。

• 生成的数字必须在335和0之间的范围内
• 第一个数字必须是最大数字（335），将是最接近的div的右侧间距
• 最后一个数字必须是最小数字（0），将是最远div的右侧间距
• 每个div之间的上下间隙应逐渐减小。

通过将最大数量除以div数，我得到一个简单的效果。但是，这会使每个div之间的距离相等，因此3D效果并不那么令人信服。

每个div使用for循环添加到DOM。类似于以下内容

var divsToGenerate = 14;
var divsArr;
var css = {top: 0, right: 335}
for( var i = 0; i < divsToGenerate; i++ ) {
   css = {top: 35, right: 300}
   divsArr += '<div style="top:'+ css.top +'; right:'+ css.right +'"></div>';
}

我在生成335和0之间的数字时遇到麻烦，该数字会逐渐减小每个通过div之间的距离。给它分层的3D效果。

Answer 1

您可以生成如下序列：

[...Array(14).keys()]      // generate array from 0 to 13
.map(x => x / 13)          // convert to a value between 0 and 1
.map(x => 1 - x)           // go from high to low
.map(x => Math.pow(x, 2))  // square to gradually decrease the difference
.map(x => 335 * x)         // convert to a value between 0 and 335
.map(x => x.toFixed(0))    // discard decimal places

您可以更改指数Math.pow(x, 2)来改变过渡的速度，或者改用Math.exp。