菱形套娃

马黑黑

先看样式：

马黑黑

再看代码：

1. <style>
   
2. #ma {
   
3.         margin: 100px;
   
4.         width:200px;
   
5.         height: 200px;
   
6.         position: relative;
   
7.         display: grid;
   
8.         place-items: center;
   
9. }
   
10. .doll {
    
11.         position: absolute;
    
12.         border-radius: 3px;
    
13.         opacity: .95;
    
14. }
    
15. </style>
    
16. 
    
17. <div id="ma"></div>
    
18. 
    
19. <script>
    
20. 
    
21. var setSize = (ww) => Math.sqrt(2 * Math.pow(ww,2));
    
22. var size = setSize(ma.offsetWidth / 2);
    
23. 
    
24. [...new Array(8).keys()].forEach(key => {
    
25.         var item = document.createElement('div');
    
26.         var deg = key % 2 == 0 ? 45 : 0;
    
27.         item.className = 'doll';
    
28.         item.style.cssText += `
    
29.                 width: ${size}px;
    
30.                 height: ${size}px;
    
31.                 background-color: #${Math.random().toString(16).substr(-6)};
    
32.                 transform: rotate(${deg}deg);
    
33.         `;
    
34.         ma.appendChild(item);
    
35.         size = setSize(size / 2);
    
36. });
    
37. 
    
38. </script>

复制代码

马黑黑

最后略作解释：

父元素（没有设置边框）套的第一个菱形，就是最大的那个菱形，它其实也是一个正方形，其边长计算公式为：

c = √(a&#178;+b&#178;)

因为是正方形，a = b，设 a=ww，则：

c = √(2 * ww&#178;)

用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:  以后还真得计笔记了

小辣椒

感觉越来越看不懂，只能做的时候蒙了

马黑黑

小辣椒 发表于 2024-1-9 21:11
感觉越来越看不懂，只能做的时候蒙了

这是数学问题，数学不好绕道吧

马黑黑

小辣椒 发表于 2024-1-9 21:10
习惯看宽度尺寸标志为width:  以后还真得计笔记了

width在CSS和HTML中使用

小辣椒

马黑黑 发表于 2024-1-9 21:26
这是数学问题，数学不好绕道吧

本来就学渣渣，只能绕道

马黑黑

小辣椒 发表于 2024-1-9 21:50
本来就学渣渣，只能绕道

不过数学在做帖时用得上

小辣椒

马黑黑 发表于 2024-1-9 22:30
不过数学在做帖时用得上

我早就统统忘记了，只能等小妞以后学成教我了

马黑黑

小辣椒 发表于 2024-1-9 22:33
我早就统统忘记了，只能等小妞以后学成教我了

也好

红影

马黑黑 发表于 2024-1-9 20:28
ww 是 setSize 函数的参数，指等边直角三角形的直角边，这个参数由求值者传递。具体举个例子：

已知父 ...

这个公式看懂了，开始没看懂数据的传递，现在知道了。
每一个矩形依据是否被 2 整除决定自身是否旋转，这个挺巧妙。才形成了菱形的燕子，否则就是一个个正方形

红影

马黑黑 发表于 2024-1-9 20:29
是的。ma 是父元素，offsetWidth 是它在CSS中设置的宽度，即 width: 200px;

如果是长方形，有长和宽两个数字的，公式就更麻烦了吧。
哦，不对，长方形的话，能被2整除的直接就菱形，然后不能整除的仍保持长方形。

马黑黑

红影 发表于 2024-1-9 22:58
如果是长方形，有长和宽两个数字的，公式就更麻烦了吧。
哦，不对，长方形的话，能被2整除的直接就菱形 ...

长方形这个方法套不了

马黑黑

红影 发表于 2024-1-9 22:50
这个公式看懂了，开始没看懂数据的传递，现在知道了。
每一个矩形依据是否被 2 整除决定自身是否旋转， ...

如果放入旋转状态中，而不是静止的，那也么关系