javascript - 生成具有以下条件的一系列数字

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。