如何使用javascript在網格布局中放置div

Question

我正在嘗試使用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>

我在這里迷路了:(請幫助我:)

Answer 1

您確實不想在這里做很多事情：

首先，您實際上是在使用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開始（因為無論如何您都會在條件內遞增j）

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用作字符串，然后將它們解析為浮點數以求出位置，然后將它們變回字符串以將樣式附加上“ 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，里面是TABLE，里面是TR，里面是單個TD，用於保存指向圖像的鏈接...

由於您使用的是表格，為什么不將整個內容呈現為表格，並給表格加上單元格的11px填充呢？ 或者更好的方法是擺脫該限制，直接將圖像放在第二個div下，然后將style屬性應用於該div來設置所需的間距和位置效果。

為了使您的生活變得簡單，只需為前兩個圖像創建一個循環，然后調試代碼以查看您是否為A）獲取所需的xpos和ypos值。 B）您獲得的字符串中包含所有DIVS，並應用了正確的樣式屬性。

如果您簡化代碼並按照建議清理標記，那么這可能是對幾個元素的快速視覺檢查

如何使用javascript在網格布局中放置div

問題描述

1 個解決方案

解決方案1
0 2015-07-15 09:10:04

如何使用javascript在網格布局中放置div

問題描述

1 個解決方案

解決方案1 0 2015-07-15 09:10:04

解決方案1
0 2015-07-15 09:10:04