javascript - js如何让div从10反转排列成v字型？

Question

var ap = document.getElementsByTagName('p');
var str ='';
for(var i=0;i<20;i++){
    str += '<p>' + i + '</p>'
    document.body.innerHTML = str; 
};
 
var j = 0;
for(var i=0;i<ap.length;i++){
    if(i > ap.length /2){
        ap[i].style.left = i * 50 +'px'; 
        j = j + 2;
        ap[i].style.top = i * 50 - j * 50 +'px';
    }else{
        ap[i].style.left = i*50 +'px'; 
        ap[i].style.top = i*50 +'px';
    }
}

这里的
j = j + 2;
ap[i].style.top = i 50 - j 50 +'px';
是什么意思？

Answer 1

很好理解，v形的动作，而且是45度角对称。
前一半是45度向右下运动，所以定位x和y在同时增大
后一半是45度向右上运动，【这时候p已经运动到了屏幕最低点，也就是V形的底部】，要计算下一步向右上方移动，就必须先知道之前运动到底部的位置。
left一直在增大，top是先增大再减小