Skip to content

Instantly share code, notes, and snippets.

@FreddiStar

FreddiStar/Index.html

Created June 8, 2018 06:02
Show Gist options
  • Save FreddiStar/6ff3ce6765dcbc5965b27b0445cb6bab to your computer and use it in GitHub Desktop.
Save FreddiStar/6ff3ce6765dcbc5965b27b0445cb6bab to your computer and use it in GitHub Desktop.
Download ZIP
2D Tile Grid with varing tile sizes
Raw
Index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
<div id="grid"></div>
<pre id="gridDebug"></pre>
<script>
//var items = [1, 1, 1, 2, 1, 2, 1, 1, 1, 1, 1, 2, 1, 1, 1, 2, 1, 1, 1, 2, 1, 2, 1, 1, 1, 1, 1, 2, 1, 1, 1, 2]
var items = [
1, 1, 1, 2, 1, 2, 1, 1, 1, 1, 1, 2, 1, 1, 1, 2, 1, 1, 1, 2, 1, 2, 1, 1, 1, 1, 1, 2, 1, 1, 1, 2,
1, 1, 1, 2, 1, 2, 1, 1, 1, 1, 1, 2, 1, 1, 1, 2, 1, 1, 1, 2, 1, 2, 1, 1, 1, 1, 1, 2, 1, 1, 1, 2,
1, 1, 1, 2, 1, 2, 1, 1, 1, 1, 1, 2, 1, 1, 1, 2, 1, 1, 1, 2, 1, 2, 1, 1, 1, 1, 1, 2, 1, 1, 1, 2,
1, 1, 1, 2, 1, 2, 1, 1, 1, 1, 1, 2, 1, 1, 1, 2, 1, 1, 1, 2, 1, 2, 1, 1, 1, 1, 1, 2, 1, 1, 1, 2,
1, 1, 1, 2, 1, 2, 1, 1, 1, 1, 1, 2, 1, 1, 1, 2, 1, 1, 1, 2, 1, 2, 1, 1, 1, 1, 1, 2, 1, 1, 1, 2]
var gridWidth = 5
var itemCount = items.reduce(((a, b) => a + b * b), 0)
var grid = []
var tileSize = window.innerWidth/gridWidth
var gridNode = document.getElementById("grid")
for (var i = 0; i < itemCount * 2; ++i) {
grid[i] = -1
}
var g = 0
for (var i = 0; i < items.length; ++i) {
var node = document.createElement("div")
var size = items[i]
node.id = "gallery_item_" + i
node.classList.add("positioning")
node.innerHTML = i
var g = 0;
while (g < grid.length) {
var x = g % gridWidth
var y = Math.floor(g / gridWidth)
var free = true;
for (var xx = 0; xx < size; ++xx) {
for (var yy = 0; yy < size; ++yy) {
var index = (y + yy) * gridWidth + (x + xx)
if (grid[index] != -1) {
free = false;
}
}
}
if (free && (x + size - 1) < gridWidth) {
node.style.left = (x * tileSize) + "px"
node.style.top = (y * tileSize) + "px"
node.style.width = (size * tileSize) + "px"
node.style.height = (size * tileSize) + "px"
node.style.lineHeight = (size * tileSize) + "px"
var gb = 128 + Math.floor(size / gridWidth * 128)
var r = 128 + Math.floor(i / items.length * 128)
node.style.backgroundColor = "rgb(" + r + ", " + gb + ", " + gb + ")"
for (var xx = 0; xx < size; ++xx) {
for (var yy = 0; yy < size; ++yy) {
var index = (y + yy) * gridWidth + (x + xx)
grid[index] = i
}
}
break;
} else {
g++
}
}
gridNode.appendChild(node)
}
var result = "";
for (var i = 0; i < grid.length; ++i) {
result += (" " + grid[i]).slice(-3)
if (i % gridWidth == gridWidth - 1) {
result += "\n"
}
}
//document.getElementById("gridDebug").innerHTML = result
</script>
<style>
.positioning {
position: absolute;
text-align: center;
font-size: 7pt;
}
</style>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment