随、风 2021-12-21 14:16 采纳率: 40%
浏览 44
已结题

请教用JavaScript如何做到根据个数生成大小相同的div，然后这些div要正好在一个大盒子中排的整齐

需求：
通过js或者JQ实现输入不同的个数，根据个数计算出一个div合理的宽和高，然后生成相应个数的div，然后添加到大盒子中、整齐的排布。按照一定间距铺满大盒子。
div的宽和高根据个数动态计算。

预期效果：
个数为90时：

img

个数为其他时，也自适应铺满，不同的个数，宽高是不同的。

现阶段：现在根据我的思路可以实现某一个数量的div是合理的铺满的，但无法自适应其他数量的铺满

我尝试过的方法：
使用大盒子面积除以个数，求得一个div的面积，再通过一些运算（不知道怎么运算）计算出合理的宽高。

现阶段代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
        <link rel="stylesheet" type="text/css" href="css/index.css"/>
    </head>
    <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    <body>
        <div class="home" id="home">
            <div class="title">
                
            </div>
            <div class="content">
                
            </div>
        </div>
    </body>
    <script src="js/my.js" type="text/javascript" charset="utf-8"></script>
</html>

html,
body {
    /* border: 1px solid red; */
    height: 100%;
}
.home {
    height: 100%;
    border: 1px solid red;
}
.home .title{
    height: 15%;border: 1px solid red;
}
.home .content{
    padding: 5px;
    height: 85%;border: 1px solid red;
}
.box{
    margin: 5px;
    border:1px solid #ff5500;
}

$(function(){
    var h=$('.content').height();   //区域高度
    var w=$('.content').width();    //区域宽度
    console.log(h)
    console.log(w)
    var n=90;    //box个数
    var area=w*h;  //区域面积
    var boxarea=parseInt(area/n);   //box面积
    var boxw=parseInt(Math.sqrt(boxarea))-22;    //box宽
    var boxh=parseInt(Math.sqrt(boxarea))-2;    //box高
    var box='';
    console.log(boxarea)
    console.log(boxw)
    for (var i = 0; i < n; i++) {
        box+='<div class="box" style="width:'+boxw+'px;height:'+boxh+'px;display:inline-block;"></div>';
    }
    $('.content').html(box);
})
  • 写回答

1条回答 默认 最新

  • baiy20151018b 2021-12-21 15:28
    关注
    
#mainDOM {
            height: 500px;
            width: 600px;
            border: 1px solid blue;
            display: flex;
            flex-wrap: wrap;
        }
        .subDiv {
            background-color: cadetblue;
            margin: 5px;
        }

    <input type="text" id="inputDOM" />
    <button onclick="showDiv()">点我</button>
    <div id="mainDOM"></div>


    
//输入任意一个数字，返回它的最大质因数
function myMaxPrimeFactors(num) {
    if(num <= 0) {
        console.log('Plese input a positive integer!');
        return;
    }
    var factor = 2;
    var lastFactor = 1;
    while(num > 1) {
        if(num % factor == 0) {
            lastFactor = factor;
            num = num / factor;
        } else {
            factor = factor + 1;
        }
    }
    return lastFactor;
}

function showDiv() {
    let inputDOM = document.getElementById('inputDOM')
    let val = inputDOM.value
    let widthNum = myMaxPrimeFactors(parseInt(val)) //横向div的个数
    let heightNum = parseInt(val) / widthNum //纵向div的个数
    
    let mainDOM = document.getElementById('mainDOM') //获取被填充的div
    let widthInput = mainDOM.clientWidth
    let heightInput = mainDOM.clientHeight

    //移出已经添加完成的子div
    let allChildren = mainDOM.childNodes
    let index = allChildren.length
    while(index>0) {
        index--
        mainDOM.removeChild(allChildren[index])
    }

    //生成新的div加入
    for (let i = 0; i < heightNum; i++) {
        for (let j = 0; j < widthNum; j++) {
            let subDiv = document.createElement('div')
            subDiv.setAttribute('class','subDiv')
            subDiv.style.width = widthInput / widthNum - 10 + 'px'
            subDiv.style.height = heightInput / heightNum - 10 + 'px'
            mainDOM.appendChild(subDiv)
        }
        
    }

}
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

问题事件

  • 系统已结题 1月5日
  • 已采纳回答 12月28日
  • 创建了问题 12月21日

悬赏问题

  • ¥15 WPF 大屏看板表格背景图片设置
  • ¥15 这个主板怎么能扩出一两个sata口
  • ¥15 不是，这到底错哪儿了😭
  • ¥15 2020长安杯与连接网探
  • ¥15 关于#matlab#的问题：在模糊控制器中选出线路信息，在simulink中根据线路信息生成速度时间目标曲线（初速度为20m/s，15秒后减为0的速度时间图像）我想问线路信息是什么
  • ¥15 banner广告展示设置多少时间不怎么会消耗用户价值
  • ¥16 mybatis的代理对象无法通过@Autowired装填
  • ¥15 可见光定位matlab仿真
  • ¥15 arduino 四自由度机械臂
  • ¥15 wordpress 产品图片 GIF 没法显示