поправить код
здравстуйте господа.
Есть код который создает некоторое кол-во блоков внутри одного блока и распологает их отсортированно друг за другом (смотри выполнение). <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() {} сделав код покороче и универсальнее ( |
Arramis,
может таблицу генерировать а не дивы? |
Цитата:
помоему |
Arramis,
немогли бы вы пояснить что значит Цитата:
Цитата:
|
Цитата:
и сдвигает вниз на deltaY px если кол - во блоков > 3 или > 7 - получается такое некое выравнивание. Мне нужно чтобы эта функция выполнялась правильно (тоесть "выравнивала" блоки) в независомсти от кол - ва блоков. Даешь ему параметр колва блоков, deltaX, deltaY и она рисует столько сколько нужно и "выровненно". Если генерировать таблицу то содержимое каждого tr и td надо будет тоже выравнивать (но уже с другими значениями deltaX и deltaY) чтобы все картинки из общей картинки накладывались на каждый этот блок ровно. |
Цитата:
... да и зачем сдвигать задали нужные отступы оно само ляжет как надо |
Цитата:
|
рони,
тоесть мне необходимо сдвигать именно эти созданные мною блоки а не сами картинки, потому что картинки на одной целой картинке доступа к которым из js я не имею потому что они находятся в другой картинке которая одна. |
рони,
если блоки не сдвигать они будут накладываться друг на друга - тоесть все блоки будут на первой картинке, а мне нужно чтобы каждый блок был наложен на каждой картинке. |
Arramis,
моя твоя непонимать ... |
Arramis,
:-? <!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
</head>
<body>
<table>
<tr>
<td>
<div id = "boxes_container">
</div>
</td>
</tr>
</table>
<style>
table {
margin: 0 auto;
padding: 0px;
}
.hidden_box {
margin: 1px;
padding: 1px;
border: 1px solid black;
float: left;
}
</style>
<script type = 'text/javascript'>
function createHiddenBoxes(boxesNumber, Cell, Id) {
var boxContainer = document.getElementById(Id);
boxContainer.style.width = (95+6)*Cell + 'px';
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);
}
}
createHiddenBoxes(12, 4, "boxes_container");
</script>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
</head>
<body>
<table>
<tr>
<td>
<div id = "boxes_container">
</div>
</td>
</tr>
</table>
<style>
table {
margin: 0 auto;
padding: 0px;
}
.hidden_box {
margin: 1px;
padding: 1px;
border: 1px solid black;
float: left;
}
</style>
<script type = 'text/javascript'>
function createHiddenBoxes(boxesNumber, Cell, Id) {
var boxContainer = document.getElementById(Id);
boxContainer.style.width = (95+6)*Cell + 'px';
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);
}
}
createHiddenBoxes(100, 5, "boxes_container");
</script>
</body>
</html>
|
| Часовой пояс GMT +3, время: 18:00. |