<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title> </title>

    <style>

        #box{

            height: 600px;

            width: 600px;

            border: 1px solid black;

        }

        </style>

</head>

<body>

    <input id="sr" />

    <input type="button" id="bt" value="自动生成div" />

    <div id="box"></div>

</body>

<script>

    window.onload = function () {

        var aBtn = document.getElementById('bt');

        var oBox = document.getElementById('box');

        var oSr = document.getElementById('sr');

        var str = '';

        var num = 0;

        var flag = 0;

        var aColor = ['red', 'blue', 'green', 'yellow', 'purple', 'pink', 'gray'];

        //自动生成100个10*10的div

        aBtn.onclick = function () {

            str = '';

            num = oSr.value;  //3

            cnum = Math.round(Math.sqrt(num));  //2

            lnum = Math.floor(num / cnum);  //1

            xnum = 0;

            if(num != 3){

                for (var i = 0; i < lnum; i++) {

                    for (var j = 0; j < cnum + xnum; j++) {

                        if (i == lnum - 1) {

                            xnum = num - cnum * lnum;

                        }

                        str += '<div style = "float:left;width:' + Math.floor(oBox.clientWidth / (cnum + xnum)) + 'px;height:' + Math.floor(oBox.clientHeight / lnum) + 'px;background:' + aColor[(i + j) % aColor.length] + ';"></div>';

                    }

                    str += '<br />';

                }

            }else{

                for (var i = 0; i < cnum; i++) {

                    for (var j = 0; j < lnum + xnum; j++) {

                        if (i == cnum - 1) {

                            xnum = num - cnum * lnum;

                        }

                        str += '<div style = "float:left;width:' + Math.floor(oBox.clientWidth / (lnum + xnum)) + 'px;height:' + Math.floor(oBox.clientHeight / cnum) + 'px;background:' + aColor[(i + j) % aColor.length] + ';"></div>';

                    }

                    str += '<br />';

                }

            }

            oBox.innerHTML = str;

        }

    }

</script>

</html>

效果如下：

固定容器内任意个div填充算法的更多相关文章

  1. windows8 开发教程 教你制作 多点触控Helper可将任意容器内任意对象进行多点缩放

    http://blog.csdn.net/wangrenzhu2011/article/details/7732907 (转) 实现方法: 对Manipulation进行抽象化 使不同容器可共用多点缩 ...

  2. html中的div、td 、p 等容器内强制换行和不换行的实现

    div.td .p 等容器内强制换行和不换行,在某些情况下还是比较实用的,下面本文整理了一些相关方面的知识,并有具体的实现方法,需要的朋友可以参考下1.强制不换行,同时以省略号结尾. 代码如下:< ...

  3. Open gl 的不规则图形的4联通种子递归填充和扫描线种子递归填充算法实现

    实验题目:不规则区域的填充算法 实验目的:验证不规则区域的填充算法 实验内容:利用VC与OpenGL,实现不规则区域的填充算法. 1.必做:实现简单递归的不规则区域填充算法. 2.选做:针对简单递归算 ...

  4. CGA填充算法之种子填充算法

    CGA填充算法之种子填充算法 平面区域填充算法是计算机图形学领域的一个很重要的算法,区域填充即给出一个区域的边界 (也可以是没有边界,只是给出指定颜色),要求将边界范围内的所有象素单元都修改成指定的颜 ...

  5. 【OpenCV新手教程之十五】水漫金山：OpenCV漫水填充算法（Floodfill）

    本系列文章由@浅墨_毛星云 出品,转载请注明出处.    文章链接: http://blog.csdn.net/poem_qianmo/article/details/28261997 作者:毛星云( ...

  6. Flume+Kafka收集Docker容器内分布式日志应用实践

    1 背景和问题 随着云计算.PaaS平台的普及,虚拟化.容器化等技术的应用,例如Docker等技术,越来越多的服务会部署在云端.通常,我们需要需要获取日志,来进行监控.分析.预测.统计等工作,但是云端 ...

  7. 只用CSS实现容器内图片上下左右居中

    一直以来,大家都知道,DIV容器内设置 text-align:center 即可让图片居中,但是DIV内默认的图片是上对齐,不会上下居中,如果想要实现这样的效果,JS判断是比较麻烦的,因为DIV容器内 ...

  8. 图像处理之泛洪填充算法(Flood Fill Algorithm)

    泛洪填充算法(Flood Fill Algorithm) 泛洪填充算法又称洪水填充算法是在很多图形绘制软件中常用的填充算法,最熟悉不过就是 windows paint的油漆桶功能.算法的原理很简单,就 ...

  9. 图像处理------泛洪填充算法(Flood Fill Algorithm) 油漆桶功能

    泛洪填充算法(Flood Fill Algorithm) 泛洪填充算法又称洪水填充算法是在很多图形绘制软件中常用的填充算法,最熟悉不过就是 windows paint的油漆桶功能.算法的原理很简单,就 ...

随机推荐

  1. elasticsearch 2.2+ index.codec: best_compression启用压缩

    官方说法,来自https://www.elastic.co/guide/en/elasticsearch/reference/2.2/index-modules.html#_static_index_ ...

  2. 【scala】可变参数

    Scala允许使用可变的参数列表. 语法 在声明的参数类型后边添加星号(*) 示例 object HelloWorld{ def hello(args:String*): Unit ={ for(ar ...

  3. jdbc之防sql注入攻击

    1.SQL注入攻击:    由于dao中执行的SQL语句是拼接出来的,其中有一部分内容是由用户从客户端传入,所以当用户传入的数据中包含sql关键字时,就有可能通过这些关键字改变sql语句的语义,从而执 ...

  4. OS快捷键

    OS X 键盘快捷键 若要使用键盘快捷键或按键组合,您可以同时按修饰键和字符键.例如,同时按下 Command 键(标有 符号的按键)和“c”键会将当前选中的任何内容(文字.图形等)拷贝至夹纸板.这也 ...

  5. MySql 批量创建、导入实例

    1.创建sql(例如,taobao,dangdang): DROP DATABASE IF EXISTS taobao; CREATE DATABASE taobao CHARSET=utf8; US ...

  6. VS2017连接到中国区的Azure

    1. 安装Azure Environment Select扩展 2. 选择中国区的Azure 3. 之后就可以使用中国区的账号登录了 参考链接:https://docs.azure.cn/zh-cn/ ...

  7. LINUX命令—让人喜爱的find

    FIND命令的让人喜爱的地方在于其后面跟着的 –exec  可以执行其他linux命令 这点太让人高兴了,不过他的结尾要带一个特殊的结构 {} \: 说说实例:

  8. [转载] ffmpeg摄像头视频采集-采集步骤概述并采集一帧视频

    近期由于工作任务,需要开发一个跨平台视频聊天系统,其中就用到了ffmpeg进行采集与编码,网上找了一大堆的资料,虽然都有一些有用的东西,但实在太碎片化了,这几天一直在整理和实验这些资料,边整理,边做一 ...

  9. HDU - 233 Matrix

    原题地址:http://acm.hdu.edu.cn/showproblem.php?pid=5015 解题思路:一看到题目,感觉是杨辉三角形,然后用组合数学做,不过没想出来怎么做,后来看数据+递推思 ...

  10. PS常用美化处理方法大全

    学习PS的同学都知道,我们日常生活中使用PS就是进行一些简单的图像美白,图像颜色的优化,其他的基本不用,在长时间的PS使用过程中本人总结了一些处理皮肤的方法,都是一些非常简单的方法,希望能够帮助那些刚 ...