js中的一个一维数据转二位数据显示效果

1.动态创建一系列的div，然后显示在body中，这个效果比较简单，如下展示

        var oDiv = document.getElementsByTagName("div");
        for (var i = 0; i < 100; i++) {
              document.body.innerHTML += "<div>" + i + "</div>";
        }
        console.log(oDiv);
        console.log(res);
        for (var i = 0; i < oDiv.length; i++) {
              oDiv[i].style.left = 10 + i * 60 + "px";
        }

 

 2.动态创建100个元素，然后每逢10个元素就换行显示，看看效果

思路：就是把一维数组转为二维数组然后再动态计算左边距和上边距

1.断行，行数怎么计算

2.每行的左边距怎么计算

3.每行的上边距怎么计算

 

        var oDiv = document.getElementsByTagName("div");
        for (var i = 0; i < 100; i++) {
          document.body.innerHTML += "<div>" + i + "</div>";
        }
        console.log(oDiv);
        let num = 10;
        let len = oDiv.length;
        let n = 10; //假设每行显示10个，下面计算每行的显示
        let lineNum = len % n === 0 ? len / n : Math.floor(len / n + 1);
        let res = [];
        for (let i = 0; i < lineNum; i++) { 
          let temp = [].slice.call(oDiv, i * n, i * n + n);  //div对象不是数组，没有slice方法
          res.push(temp);
        }
        console.log(res);
        for (var i = 0; i < oDiv.length; i++) {
          for (var j = 0; j < res[i].length; j++) {
            res[i][j].style.left = 10 + j * 60 + "px";  // 每行的上边距是根据i决定的
            res[i][j].style.top = 10 + i * 60 + "px";   // 每行的左边距是根据i决定的
          }
        }