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决定的
}
}