用純javascript填充屏幕上的鑽石網格（jsfiddle可用）

解決此問題的人將獲得150點信譽積分，一旦有資格獲得獎勵。用純javascript填充屏幕上的鑽石網格（jsfiddle可用）

正如你可以在看的jsfiddle我做了一些三角函數計算找出了相鄰的展示位置的確切位置。

下面的公式給我確切的定位：

elem.offsetHeight * Math.cos(degrees converted into radians) + elem.offsetTop

elem.offsetWidth * Math.cos(degrees converted into radians) + elem.offsetLeft

當然，同樣的事情也通過獲取頂點可能，代碼只會更大。這裏有一個小例子：

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

不管怎樣，我認爲自動放置非常困難。我的意思是我想實現下面的圖片類似：http://www.purplesquirrels.com.au/wp-content/uploads/2015/02/dg.png

問：那麼，如何可以使鑽石網蔓延，從中心屏幕/容器的整個高度和寬度？不是從左到右和從上到下的循環，而是從中心以一種循環的方式開始。

來源

2016-02-21 Asperger

我能夠得到充滿兩個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; 
 
    \t prevDiamond = newDiamond; 
 
    \t 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>

來源

2016-02-21 16:21:51 redelschaap

您使用的是有getBoundingClientRect一個完全不同的方法。十分有趣。 – Asperger

檢查此https://jsfiddle.net/xzxe6y5k/4/ – Asperger

與重疊鑽石的好效果 – redelschaap

用純javascript填充屏幕上的鑽石網格（jsfiddle可用）

回答

相關問題