поправить код
здравстуйте господа.
Есть код который создает некоторое кол-во блоков внутри одного блока и распологает их отсортированно друг за другом (смотри выполнение).
<table>
<tr>
<td>
<div id = "boxes_container">
</div>
</td>
</tr>
</table>
<style>
table {
margin: 0 auto;
}
#boxes_container {
width: 500px;
height: 350px;
position: relative;
}
.hidden_box {
margin: 1px;
padding: 1px;
border: 1px solid black;
position: absolute;
}
</style>
<script type = 'text/javascript'>
var boxesNumber = 12, boxContainer = document.getElementById("boxes_container");
function createHiddenBoxes() {
var hiddenBox;
for (i = 0; i < boxesNumber; i++) {
hiddenBox = document.createElement("div");
hiddenBox.className = "hidden_box";
hiddenBox.id = "hidden_box" + i;
hiddenBox.style.width = 95 + 'px';
hiddenBox.style.height = 70 + 'px';
boxContainer.appendChild(hiddenBox);
}
}
function sortHiddenBoxes() {
var hiddenBoxes = boxContainer.getElementsByClassName("hidden_box"),
x = 0, y = 0, deltaX = 100, deltaY = 75;
for (var i = 0; i < boxesNumber; i++) {
if (i == 0) hiddenBoxes[i].style.top = 5 + 'px';
if (i != 0 && i < 4) {
x += deltaX;
hiddenBoxes[i].style.left = x + 'px';
hiddenBoxes[i].style.top = 5 + 'px';
}
}
x = -deltaX;
for (var j = 0; j < boxesNumber; j++) {
if (j > 3) {
x += deltaX;
y = deltaY;
hiddenBoxes[j].style.left = x + 'px';
hiddenBoxes[j].style.top = y + 'px';
}
}
x = -deltaX;
y = 2 * deltaY;
for (var k = 0; k < boxesNumber; k++) {
if (k > 7) {
x += deltaX;
hiddenBoxes[k].style.left = x + 'px';
hiddenBoxes[k].style.top = y + 'px';
}
}
}
createHiddenBoxes(); sortHiddenBoxes();
</script>
необходимо переписать функцию sortHiddenBoxes() так чтобы она каждый раз динамически отрисовывала блоки в зависимости от переменной boxesNumber в которой указывается число блоков - значение для этой переменной тянется из базы и иногда может быть разным (это кол-во картинок которые расположены в одной общей картинке (4 x 3, 5 x 20) по 4 картинки на каждой строке с 5ью столбцами и т.д.)
Мой гавнокодский вариант работает только для случая 4 x 3 (12 блоков - потому что большинство картинок будут иметь в себе 12 картинок, но большинство не означает ВСЕ!!).
Помогите избавиться от этих 3 циклов for() {} сделав код покороче и универсальнее ( |