在固定宽高内显示固定数量的最大正方形

排列一行，两行时正方形大小（3行以上会超出就不计入比较）

排列一列，两列，三列时正方形大小（4列以上会超出就不计入比较）

将计算出来的正方形宽进行比较即可得到最大值

       var config = {width:window.innerWidth,//固定宽height:window.innerHeight,//固定高num:20,//要显示正方形的数量maxWidth:0,//求的最大宽度maxSquera:0,//求的最大面积}set(config.num)function set(num){// 从行开始排 for(var i = 1;i<=num;i++){// 一行多少个var line = Math.ceil (num / i);// 求边长(向下取整)var borderWidth = Math.floor(config.width / line);// 求面积var tempS = (borderWidth * borderWidth) *num;// 判断行数高度是否超过屏幕高度if(config.height< borderWidth * i){break;}if(tempS > config.maxSquera ){config.maxSquera = tempS;config.maxWidth = borderWidth;}}   // 从列开始算for(var i = 1;i<=num;i++){// 一行多少个var line = Math.ceil (num / i);// 求边长var borderWidth = Math.floor(config.height / line);var tempS = (borderWidth * borderWidth) *num;if(config.width< borderWidth * i){break;}if(tempS > config.maxSquera ){config.maxSquera = tempS;config.maxWidth = borderWidth;}}   console.log(config)}

在固定宽高内显示固定数量的最大正方形相关推荐

[css] 写出在不固定宽高的元素在固定高度的情况下水平垂直居中的方法
[css] 写出在不固定宽高的元素在固定高度的情况下水平垂直居中的方法 flex布局:还有就是可以用定位也可以实现等等: flex:父div:{display:flex: justify-conten ...
css 实现div内显示固定三行，超出部分用省略号显示
css 实现div内显示两行或三行,超出部分用省略号显示一.div内显示一行,超出部分用省略号显示 white-space: nowrap;overflow: hidden;text-overflo ...
移动端图片自适应，img固定宽高，怎么解决不同尺寸图片显示会变形的问题
方案1: 根据图片实际宽高和需要显示的容器宽高等比例拉伸或缩小1.父容器如div设置固定width和height,设置 overflow: hidden,设置相对定位;2. img设置绝对定位,设置最 ...
vue图片在设置好的div里面自动适应宽高，显示全部图片，不够的留空白
vue图片在设置好的div里面自动适应宽高,图片显示全部,不够宽高的留空白 <div class="rightullidiv"><img:src="it ...
cropper固定宽高裁剪_cropper实现基本的裁剪图片并上传
使用cropper之前需要先引用 cropper.css 和 cropper.js cropper 官网:https://fengyuanchen.github.io/cropper/ cropper ...
鲜为人知的object-fit属性，让您的img图片不再因为固定宽高而被拉伸压缩
object-fit CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框. 您可以通过使用 object-position 属性来切换被替换元素(如:<iframe> ...
img固定宽高，图片等比缩小不变形
object-fit的其它值 <img src="../../../image/logo.jpeg"></img><style>img{widt ...
图片放入固定宽高div，保持纵横比
第一种方式: .box {position: relative;width: 100px;height: 100px;border: 1px solid #000; } .box a img {pos ...
cropper固定宽高裁剪_使用Cropper进行图片剪裁上传
在项工按不移流果箭近作量同动量和头近作量同动目中,需要多上传的图片按照比例和尺寸进行裁剪,这类场景在一些CMS系统中是比较常见的,尤其是大部分的文章现在要适配PC.Mobile两种平台,文章的封面图等 ...
[css] img标签是行内元素，为什么却能设置宽高
[css] img标签是行内元素,为什么却能设置宽高原来CSS中还有一个概念:可替换元素MDN上是这么解释的:在 CSS 中,可替换元素(replaced element)的展现效果不是由 CSS ...

在固定宽高内显示固定数量的最大正方形

在固定宽高内显示固定数量的最大正方形相关推荐

最新文章

热门文章