我正在尝试使用 javascript 构建网格布局，但它不起作用，因为它做了一些有线的事情，它只创建了行的第一个单元格，而不是整行。
代码如下:
<style>
body {
background-color: rgba(255, 0, 0, 0);
overflow: hidden;
z-index: 0;
}
.imgCell {
position: absolute;
width: 84px;
height: 84px;
background: rgba(200, 50, 50, 1);
border-radius: 10px;
padding: 0px;
-webkit-box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.1);
}
.tdCellName {
width: 60px;
height: 60px;
text-align: center;
font-size: 30px;
color: #fff;
white-space: nowrap;
}
</style>
<script>
function displayIMG() {
var str = "";
var m = 0;
var j = 1;
for (var i = 0; i <= GlobalImgList.length-1; i++) {
m = m+1;
var divsID = "flscell"+i;
var Img = GlobalImgList[i];
var posy = "10";
var posx = parseFloat(Math.abs(10+110*i));
//how many cells to count until breaking to a new row
if(m%7 == 0) {
j = j+1;
var posx = "10";
var posy = parseFloat(Math.abs(10+110*i));
}
str += "<div id=\""+divsID+"\" class=\"imgCell\" style=\"top: "+posy+"px; left: "+posx+"px; opacity: 1;\">";
str += "<div style=\"position: relative; top: 11px; left: 11px;\">";
str += "<table cellspacing=0 cellpadding=0 border=0>";
str += "<tr>";
str += "<td class=\"tdCellName\" align=\"center\">";
str += Img;
str += "</td>";
str += "</tr>";
str += "</table>";
str += "</div>";
str += "</div>";
}
document.getElementById("main").innerHTML = str;
}
</script>
<body>
<div id="main" style="position: absolute; top: 34px; left: 0px; width: 1879px; height: 1124px; padding: 20px; overflow: scroll;">
</div>
</body>
我迷路了:(请帮助我:)
最佳答案
有很多事情你真的不想在这里做:
首先，您实际上是在使用 CSS 来设置元素的样式，因此要么删除它并将所有样式直接放入标记中，要么考虑使用更多 CSS(例如为表格设置样式，让您的生活更轻松)。例如，您可以使用表格或 CSS flex-box 完全按照您的意愿进行操作，并输出多行 7 列，图像周围有 11px 的填充，带有简单的标记和少量适当的 css 样式简单的线条。
也就是说，您的 JavaScript:
for (var i = 0; i <= GlobalImgList.length-1; i++) {
相反，为什么不直接使用:
for (var i = 0; i < GlobalImgList.length; i++) {
您可以使用
轻松检查if( (i % 7) === 0 )
并且不需要额外的变量(并且每行的图像数量也不会超出一个，因为您实际上似乎在每个循环中将 m 递增为比 i 多 1，因此无论如何它都不会像您期望的那样呈现。 )
您可能真的希望 j 从 0 而不是 1 开始(因为无论如何您都会在条件中递增它)
var j = 1; should really be var j = 0;
谈论递增
if(m%7 == 0) {
j = j+1;
var posx = "10";
var posy = parseFloat(Math.abs(10+110*i));
}
你是真的要这样做还是打算根据 j 的值来确定 y 位置，就像这样
if( (i % 7) === 0) {
posx = 10;
posy = parseFloat(Math.abs(10+110*j));
j++;
}
因为您似乎在本地重新定义了 xpos 和 ypos 的变量，然后丢弃了值(当您从大括号中返回时)并且您一直在数字和字符串之间切换。
您总是将每一行的 ypos 连接为“10”，因为它在循环内部，而不是在 str 外部。
不需要将 xpos 和 ypos 用作字符串，然后将它们解析为 float 以计算出位置，然后将它们转回字符串以将您的样式与添加的“px”连接起来 -(只需将它们都保留为数字)。
您可以在字符串中混合使用单引号和双引号，这样可以更轻松地连接字符串，所以不要这样做
"<div id=\""+divsID+"\" class=\"imgCell\" style=\"top: "+posy+"px; left: "+posx+"px; opacity: 1;\">";
试试这个，
'<div id="'+divsID+'" class="imgCell" style="top:'+posy+'px; left: '+posx+'px; opacity:1;">';
如果我正确理解了您的代码，那么您所在行中的每个单元格实际上就是这组巨大的标记
<div id="" class="imgCell" style="top:posy; left:posx; opacity:1">
<div style="position: relative; top: 11px; left: 11px;">
<table cellspacing=0 cellpadding=0 border=0>
<tr>
<td class="tdCellName" align="center">
[Img]
</td>
</tr>
</table>
</div>
</div>
每个元素都是 DIV 内的 DIV，DIV 内有 TABLE，TR 内有单个 TD，其中包含指向图像的链接 ...
既然你使用的是表格，为什么不把整个东西渲染成表格，然后给表格，然后给单元格一些 11px 的填充。或者更好的办法是去掉那个，把你的图像直接放在第二个 div 下，然后将样式属性应用到那个 div 来设置你想要的间距和位置效果。
为了让您的生活变得简单，只需为前两个图像创建一个循环，然后调试代码以查看您是否 A) 获得了您期望的 xpos 和 ypos 值。 B) 您获得的字符串中包含所有 DIVS，并应用了正确的样式属性。
如果您按照建议简化代码并清理标记，那么这可能是对几个元素的快速视觉检查
关于javascript - 如何使用javascript在网格布局中定位div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31424059/