Javascript-форум - заполнить блок полностью прямоугольниками

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - заполнить блок полностью прямоугольниками (https://javascript.ru/forum/misc/70472-zapolnit-blok-polnostyu-pryamougolnikami.html)

2 блока с одинаковым весом

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  #slider{
    height: 500px;
    width: 700px;
    border: 1px solid rgb(0, 0, 255);
    position: relative;
    color: rgb(255, 255, 255);
    text-align: center;

  }
  #slider div{
     box-sizing: border-box;
     border: 1px solid rgb(255, 255, 0)
  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
$(function() {

});
  </script>
</head>

<body>
<body>
<div id="slider"><div style="left: 0px; top: 0px; position: absolute; width: 350px; height: 500px; line-height: 500px; background-color: rgb(57, 102, 227);">5</div><div style="left: 350px; top: 0px; position: absolute; width: 350px; height: 500px; line-height: 500px; background-color: rgb(57, 102, 227);">5</div></div>
<p>5,5</p>


</body>
</body>
</html>

2 блока с разным весом

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  #slider{
    height: 500px;
    width: 700px;
    border: 1px solid rgb(0, 0, 255);
    position: relative;
    color: rgb(255, 255, 255);
    text-align: center;

  }
  #slider div{
     box-sizing: border-box;
     border: 1px solid rgb(255, 255, 0)
  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
$(function() {

});
  </script>
</head>

<body>
<body>
<div id="slider"><div style="left: 0px; top: 0px; position: absolute; width: 490px; height: 500px; line-height: 500px; background-color: rgb(249, 71, 164);">7</div><div style="left: 490px; top: 0px; position: absolute; width: 210px; height: 500px; line-height: 500px; background-color: rgb(157, 160, 196);">3</div></div>
<p>3,7</p>


</body>
</body>
</html>

3 блока с одинаковым весом

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  #slider{
    height: 500px;
    width: 700px;
    border: 1px solid rgb(0, 0, 255);
    position: relative;
    color: rgb(255, 255, 255);
    text-align: center;

  }
  #slider div{
     box-sizing: border-box;
     border: 1px solid rgb(255, 255, 0)
  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
$(function() {

});
  </script>
</head>

<body>
<body>
<div id="slider"><div style="left: 0px; top: 0px; position: absolute; width: 233.333px; height: 500px; line-height: 500px; background-color: rgb(81, 21, 8);">15</div><div style="left: 233.333px; top: 0px; position: absolute; width: 466.667px; height: 250px; line-height: 250px; background-color: rgb(81, 21, 8);">15</div><div style="left: 233.333px; top: 250px; position: absolute; width: 466.667px; height: 250px; line-height: 250px; background-color: rgb(81, 21, 8);">15</div></div>
<p>15,15,15</p>


</body>
</body>
</html>

3 блока с разным весом

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  #slider{
    height: 500px;
    width: 700px;
    border: 1px solid rgb(0, 0, 255);
    position: relative;
    color: rgb(255, 255, 255);
    text-align: center;

  }
  #slider div{
     box-sizing: border-box;
     border: 1px solid rgb(255, 255, 0)
  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
$(function() {

});
  </script>
</head>

<body>
<body>
<div id="slider"><div style="left: 0px; top: 0px; position: absolute; width: 370.588px; height: 500px; line-height: 500px; background-color: rgb(215, 53, 192);">9</div><div style="left: 370.588px; top: 0px; position: absolute; width: 329.412px; height: 62.5px; line-height: 62.5px; background-color: rgb(9, 51, 201);">1</div><div style="left: 370.588px; top: 62.5px; position: absolute; width: 329.412px; height: 437.5px; line-height: 437.5px; background-color: rgb(205, 33, 238);">7</div></div>
<p>7,1,9</p>


</body>
</body>
</html>

Рони, да я понял, это прикол, думал оцените юмор.
Ваша задача наподобие как задача с рюкзаком или акциями, помните тут в форуме мелькала? у меня с математикой не очень к сожалению =(

Цитата:

Сообщение от рони

у меня блок 3 больше чем блок 5 ??? пост№7

Пробный трай. Не обессудь. Без формул не решить, сам знаешь.

Задача с виду не очень сложная если я правильно ее понял.
Массив делится на две части после у каждой части считается вес. общая площадь делится на полученную пропорцию веса каждой части. затем каждая полученная часть массива делится на более меньшие части и так пока не дойдет до неделимой части.
Алгоритм Рони палит всегда вертикальная черта в центре потом правая часть делится по горизонтали затем левая по вертикали и.т.д.

j0hnik,
думаю это раз 500 проще рюкзака ... как наполнить рюкзак не знаю.
может тогда тогда задачку на рекурсию поможешь решить, из массива надо сделать дерево, постепенно складывая несколько элементов, пока их больше 2, сохраняя этапы суммирования.

a = [1,2,3,4,5,6,7,8,9];//исходный массив
a1 = [6, 22, 17];
a2 = [28,17];
a3 = [45]

структура любая на ваше усмотрение, но такая что можно получить любой узел.

MallSerg,
:victory:

Рони

var a = [1,2,3,4,5,6,7,8,9], n = a.length-1, b = new Array(n); 
for (var i=0; i<n; i++) {
a=[a.shift()+a.shift(), ...a];
b[i]=[...a];
}
console.log(b);

j0hnik,
спасибо, но не то.

Цитата:

Сообщение от рони (Сообщение 464026)

j0hnik,
спасибо, но не то.

Рекурсия обязательна? или нужно складывать не два элемента, а больше?
В общем чуть подробнее если можно..