菱形套娃
<p>先看样式：</p><p><br></p>
<style>
#ma {
margin: 100px;
width:200px;
height: 200px;
position: relative;
display: grid;
place-items: center;
}
.doll {
position: absolute;
border-radius: 3px;
opacity: .95;
}
</style>
<div id="ma"></div>
<script>
var setSize = (ww) => Math.sqrt(2 * Math.pow(ww,2));
var size = setSize(ma.offsetWidth / 2);
[...new Array(8).keys()].forEach(key => {
var item = document.createElement('div');
var deg = key % 2 == 0 ? 45 : 0;
item.className = 'doll';
item.style.cssText += `
width: ${size}px;
height: ${size}px;
background-color: #${Math.random().toString(16).substr(-6)};
transform: rotate(${deg}deg);
`;
ma.appendChild(item);
size = setSize(size / 2);
});
</script>
再看代码：<style>
#ma {
margin: 100px;
width:200px;
height: 200px;
position: relative;
display: grid;
place-items: center;
}
.doll {
position: absolute;
border-radius: 3px;
opacity: .95;
}
</style>
<div id="ma"></div>
<script>
var setSize = (ww) => Math.sqrt(2 * Math.pow(ww,2));
var size = setSize(ma.offsetWidth / 2);
[...new Array(8).keys()].forEach(key => {
var item = document.createElement('div');
var deg = key % 2 == 0 ? 45 : 0;
item.className = 'doll';
item.style.cssText += `
width: ${size}px;
height: ${size}px;
background-color: #${Math.random().toString(16).substr(-6)};
transform: rotate(${deg}deg);
`;
ma.appendChild(item);
size = setSize(size / 2);
});
</script>
本帖最后由 马黑黑 于 2024-1-9 20:10 编辑
最后略作解释：
父元素（没有设置边框）套的第一个菱形，就是最大的那个菱形，它其实也是一个正方形，其边长计算公式为：
c = √(a²+b²)
因为是正方形，a = b，设 a=ww，则：
c = √(2 * ww²)
用js表示 ：
c = Math.sqrt(2 * Math.pow(ww,2))
于是可以设置一个求正方形边长的函数，第21行代码：
var setSize = (ww) => Math.sqrt(2 * Math.pow(ww,2));
然后设计一个全局变量 size，它首先等于父元素宽高任意一边的一半，第22行：
var size = setSize(ma.offsetWidth / 2);
最后，在 8 个菱形的追加语句代码块中（24~36行），每设置完一个菱形，用该菱形的 size 值、通过 setSize 函数改变 size 变量值给下一个矩形使用。
期间，每一个矩形依据是否被 2 整除决定自身是否旋转（第26行、32行）。还有随机背景颜色的赋值（第31行）。
功能是实现了，算法应该不是最优的。 size直接对应(ww) => Math.sqrt(2 * Math.pow(ww,2));中的ww么，就这个没看懂。然后下面的一个个轮回，依次得到更小的套环的宽高的吧？ 第一次是ma.offsetWidth / 2，然后循环的是size / 2吧？ 红影 发表于 2024-1-9 20:18
size直接对应(ww) => Math.sqrt(2 * Math.pow(ww,2));中的ww么，就这个没看懂。然后下面的一个个轮回，依次 ...
ww 是 setSize 函数的参数，指等边直角三角形的直角边，这个参数由求值者传递。具体举个例子：
已知父元素的边长为 200，求套在它里面的菱形的边长。
对于新菱形而言，它的任意一条边的都和父元素构成一个三角形，该三角形的直角边边长是父元素任意一边边长的一半，那就是100，100就是传给 setSize 函数的参数 ww，setSize 函数就算出新菱形的边长。
后面的“轮回”，总是以上一个菱形的边长去求下一个菱形的边长，复用了 setSize 函数。 红影 发表于 2024-1-9 20:19
第一次是ma.offsetWidth / 2，然后循环的是size / 2吧？
是的。ma 是父元素，offsetWidth 是它在CSS中设置的宽度，即 width: 200px; 马黑黑 发表于 2024-1-9 20:29
是的。ma 是父元素，offsetWidth 是它在CSS中设置的宽度，即 width: 200px;
习惯看宽度尺寸标志为width:以后还真得计笔记了 感觉越来越看不懂，只能做的时候蒙了{:4_170:} 小辣椒 发表于 2024-1-9 21:11
感觉越来越看不懂，只能做的时候蒙了
这是数学问题，数学不好绕道吧{:4_170:} 小辣椒 发表于 2024-1-9 21:10
习惯看宽度尺寸标志为width:以后还真得计笔记了
width在CSS和HTML中使用 马黑黑 发表于 2024-1-9 21:26
这是数学问题，数学不好绕道吧
本来就学渣渣，只能绕道 小辣椒 发表于 2024-1-9 21:50
本来就学渣渣，只能绕道
不过数学在做帖时用得上{:4_170:} 马黑黑 发表于 2024-1-9 22:30
不过数学在做帖时用得上
我早就统统忘记了，只能等小妞以后学成教我了{:4_170:}
小辣椒 发表于 2024-1-9 22:33
我早就统统忘记了，只能等小妞以后学成教我了
也好 马黑黑 发表于 2024-1-9 20:28
ww 是 setSize 函数的参数，指等边直角三角形的直角边，这个参数由求值者传递。具体举个例子：
已知父 ...
这个公式看懂了，开始没看懂数据的传递，现在知道了。
每一个矩形依据是否被 2 整除决定自身是否旋转，这个挺巧妙。才形成了菱形的燕子，否则就是一个个正方形{:4_173:} 马黑黑 发表于 2024-1-9 20:29
是的。ma 是父元素，offsetWidth 是它在CSS中设置的宽度，即 width: 200px;
如果是长方形，有长和宽两个数字的，公式就更麻烦了吧。
哦，不对，长方形的话，能被2整除的直接就菱形，然后不能整除的仍保持长方形。 红影 发表于 2024-1-9 22:58
如果是长方形，有长和宽两个数字的，公式就更麻烦了吧。
哦，不对，长方形的话，能被2整除的直接就菱形 ...
长方形这个方法套不了 红影 发表于 2024-1-9 22:50
这个公式看懂了，开始没看懂数据的传递，现在知道了。
每一个矩形依据是否被 2 整除决定自身是否旋转， ...
如果放入旋转状态中，而不是静止的，那也么关系