javascript - 如何动态添加 div 到 div 内，直到父 div 的宽度和高度已满/完成

Question

背景:我正在制作一个网页，用户将在其中输入图 block 宽度和高度以及地板宽度和高度。 地板宽度和高度用于计算地板面积。 瓷砖输入的单位是英寸，地板输入的单位是英尺。

技术信息:我设置了 1 英尺等于 60 像素，1 英寸等于 5 像素进行计算。

我现在在哪里？ 现在，我陷入了在区域(父div)中绘制所有图 block (子div)的困境。现在，我使用简单的 for 循环来制作图 block (div's)。

现在输出是这样的......

我想要什么？嗯，我正在尝试创建一项功能，当用户单击“计算”按钮时，他/她会看到地板的设计。 稍后我将着色并添加图案。

输出应该是这样的(请原谅，如果边框不对齐，这是用 Windows Paint 制作的):

代码:

        $(document).ready(function () {
            $("#btnCalculate").click(function (e) { 
                e.preventDefault();

                $("#area").empty();

                const foot = 60, inch = 5;

                let tileW = parseFloat($("#tileWidth").val());
                let tileH = parseFloat($("#tileHeight").val());

                let areaW = parseFloat($("#areaWidth").val());
                let areaH = parseFloat($("#areaHeight").val());
                
                $("#area").css("height", (foot * areaH));
                $("#area").css("width", (foot * areaW));


                for (let r = 0; r<10  ; r++) {
                    // const element = array[r];
                    $("#area").append("<div id='tile_"+r+"' style='width:"+((inch * tileW))+"px; height:"+((inch * tileH))+"px;' class='border_color'> </div>");
                    
                }
            });
        });

#area {
            border: 1px solid black;
            height: 25px;
            width: 25px;
        }
        .border_color{
            /* border: 1px solid black; */
            outline: 1px solid; /* use instead of border */
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Tile Width (inches): </p><input type="numbers" id ="tileWidth" placeholder="Tile Width" value="6">
    <p>Tile Height (inches): </p><input type="numbers" id ="tileHeight" placeholder="Tile Height" value="4">
    <br>
    <p>Area Width (foot): </p><input type="numbers" id ="areaWidth" placeholder="Area Width" value="11.5">
    <p>Area Height (foot): </p><input type="numbers" id ="areaHeight" placeholder="Area Height" value="6.5">
    <button id="btnCalculate" >Calculate</button>
        
    

    <div id="area">

    </div>

Fiddle外部链接:https://jsfiddle.net/22gLkguL/

我尝试过将所有这些存档，但失败了..! 有人可以帮助我或引导我走上正确的道路吗...？

Answer 1

使用display:flex和flex-wrap:wrap

#area {
  border: 1px solid black;
  height: 25px;
  width: 25px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

并计算每边(宽度或高度)最多可以填充的 div 数量。

$(document).ready(function() {
  $("#btnCalculate").click(function(e) {
    e.preventDefault();

    $("#area").empty();

    const foot = 60,
      inch = 5;

    let tileW = parseFloat($("#tileWidth").val());
    let tileH = parseFloat($("#tileHeight").val());

    let areaW = parseFloat($("#areaWidth").val());
    let areaH = parseFloat($("#areaHeight").val());
    
    var areaHeight = (foot * areaH)
    var areaWidth = (foot * areaW)
    var divHeight = (inch * tileH)
    var divWidth = (inch * tileW)
    
    $("#area").css("height", areaHeight);
    $("#area").css("width", areaWidth);

    var nums = Math.floor(areaWidth/divWidth) * Math.floor(areaHeight/divHeight)

    for (let r = 0; r < nums; r++) {
      var $div = $('<div>', {
        id: 'tile_' + r,
        class: 'border_color',
        height: divHeight,
        width: divWidth,
      })
      $("#area").append($div);

    }
  });
});

#area {
  border: 1px solid black;
  height: 25px;
  width: 25px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

.border_color {
  outline: 1px solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Tile Width (inches): </p><input type="numbers" id="tileWidth" placeholder="Tile Width" value="6">
<p>Tile Height (inches): </p><input type="numbers" id="tileHeight" placeholder="Tile Height" value="4">
<br>
<p>Area Width (foot): </p><input type="numbers" id="areaWidth" placeholder="Area Width" value="11.5">
<p>Area Height (foot): </p><input type="numbers" id="areaHeight" placeholder="Area Height" value="6.5">
<button id="btnCalculate">Calculate</button>



<div id="area">

</div>