|
|
|
@@ -5,6 +5,30 @@ |
|
|
|
</head> |
|
|
|
<body> |
|
|
|
</body> |
|
|
|
<script> |
|
|
|
function memorySide() { |
|
|
|
return 50 |
|
|
|
} |
|
|
|
|
|
|
|
function memorySpace() { |
|
|
|
return 20 |
|
|
|
} |
|
|
|
|
|
|
|
function memoryGap() { |
|
|
|
return memorySide() + memorySpace() |
|
|
|
} |
|
|
|
|
|
|
|
function memoryItemPositions(M) { |
|
|
|
var pos = []; |
|
|
|
for (var i = 0; i < M.itemsCount; i++) { |
|
|
|
let row = Math.floor(i / 4) |
|
|
|
let x = memoryGap() + (i - row * 4) * memoryGap() |
|
|
|
let y = memoryGap() + row * memoryGap() |
|
|
|
pos.push([x, y]) |
|
|
|
} |
|
|
|
return pos |
|
|
|
} |
|
|
|
</script> |
|
|
|
<script> |
|
|
|
var items = [] |
|
|
|
|
|
|
|
@@ -17,18 +41,17 @@ |
|
|
|
} |
|
|
|
|
|
|
|
// SectionGrid. |
|
|
|
let side = Number(50) |
|
|
|
let space = Number(20) |
|
|
|
let gap = Number(side + space) |
|
|
|
for (var id in items) { |
|
|
|
var item = items[id] |
|
|
|
let row = Math.floor(id / 4) |
|
|
|
let x = gap + (id - row * 4) * gap |
|
|
|
let y = gap + row * gap |
|
|
|
item.style.left = `${x}px` |
|
|
|
item.style.top = `${y}px` |
|
|
|
item.style.width = `${side}px` |
|
|
|
item.style.height = `${side}px` |
|
|
|
var M = { |
|
|
|
itemsCount: items.length |
|
|
|
}; |
|
|
|
let positions = memoryItemPositions(M); |
|
|
|
for (var id in positions) { |
|
|
|
var p = positions[id] |
|
|
|
var item = items[id]; |
|
|
|
item.style.left = `${p[0]}px` |
|
|
|
item.style.top = `${p[1]}px` |
|
|
|
item.style.width = `${memorySide()}px` |
|
|
|
item.style.height = `${memorySide()}px` |
|
|
|
item.style.position = "absolute" |
|
|
|
item.style.background = "blue" |
|
|
|
} |
|
|
|
|
Михаил Капелько
11 months ago