javascript - 纯javascript用菱形网格填充屏幕(jsfiddle可用)

Question

一旦我有资格获得赏金，解决此问题的人将获得 150 点声望。

https://jsfiddle.net/testopia/xzxe6y5k/

正如您在 jsfiddle 中看到的那样，我做了一些三 Angular 计算来计算出相邻位置的确切位置。

下面的公式给了我准确的定位:

elem.offsetHeight * Math.cos(度数转换成弧度) + elem.offsetTop

elem.offsetWidth * Math.cos(度数转换成弧度) + elem.offsetLeft

当然同样的事情也可以通过获取顶点来实现，只是代码会更大一些。这里有一个小例子:

elem.offsetLeft + elem.offsetWidth
elem.offsetTop + elem.offsetHeight

无论如何，我认为自动放置非常困难。我的意思是我正在尝试实现如下图所示的效果:http://www.purplesquirrels.com.au/wp-content/uploads/2015/02/dg.png

问题:那么如何让菱形网格从中心展开到屏幕/容器的整个高度和宽度？不是从左到右、从上到下的循环，而是从中心开始以某种圆形的方式。

Answer 1

我能够让屏幕充满两个 while 循环。现在我使用了一些静态边距，因此间距并不完美，但我想您的 computePosition 函数可以帮助在菱形之间生成正确的间距。

https://jsfiddle.net/xzxe6y5k/3/

var wrapper = document.getElementById('grid'), diamond = wrapper.children, newDiamond, prevDiamond, evenRow = true;

function createDiamonds() {
  while (!newDiamond || newDiamond.getBoundingClientRect().bottom < window.innerHeight) {
    evenRow = !evenRow;
  	prevDiamond = newDiamond;
  	newDiamond = wrapper.appendChild(document.createElement('div'));
    
    if (prevDiamond) {
        newDiamond.style.top = prevDiamond.getBoundingClientRect().bottom + 10 - (newDiamond.getBoundingClientRect().height / 2) + 'px';
      
      if (evenRow) {
        newDiamond.style.left = diamond[0].getBoundingClientRect().left + newDiamond.getBoundingClientRect().width / 2 + 7 + 'px';
      }
    }
    
    while (newDiamond.getBoundingClientRect().right < window.innerWidth) {
      prevDiamond = newDiamond;
      newDiamond = wrapper.appendChild(document.createElement('div'));
      newDiamond.style.left = prevDiamond.getBoundingClientRect().right + 10 + 'px';
      newDiamond.style.top = prevDiamond.style.top;
    }
  }
}

createDiamonds();

#grid div {
  background: black;
  height: 25px;
  width: 25px;
  position: absolute;
  transform: rotate(45deg)
}

<div id="grid"></div>