Для любителей задач, дан массив весов площади прямоугольников, длина и ширина любая, порядок тоже, заполнить контейнер полностью, желательно разнообразная длина и ширина блоков, вариант заполнения случайный.
дано:
<!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() {
function rgb()
{ var r=parseInt(Math.random()*255);
var g=parseInt(Math.random()*255);
var b=parseInt(Math.random()*255);
return "rgb("+r+", "+g+", "+b+")"
}
var a = [700,500]// размер контейнера
var t = [7,9,3,7,7,9,1,1,1,7,1,3,1,3,1,9,5,9,3,1];
//for (var i=0; i<20; i++) {t[i]= Math.random()*10|0+1}
// ваш код
});
</script>
</head>
<body>
<div id="slider"></div>
<p></p>
</body>
</html>
возможный результат
<!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: 87.5px; height: 45.4545px; line-height: 45.4545px; background-color: rgb(225, 170, 209);">1</div>
<div style="left: 0px; top: 45.4545px; position: absolute; width: 87.5px; height: 45.4545px; line-height: 45.4545px; background-color: rgb(225, 170, 209);">1</div>
<div style="left: 0px; top: 90.9091px; position: absolute; width: 87.5px; height: 409.091px; line-height: 409.091px; background-color: rgb(170, 24, 236);">9</div>
<div style="left: 87.5px; top: 0px; position: absolute; width: 190.909px; height: 104.167px; line-height: 104.167px; background-color: rgb(200, 234, 224);">5</div>
<div style="left: 87.5px; top: 104.167px; position: absolute; width: 190.909px; height: 62.5px; line-height: 62.5px; background-color: rgb(20, 212, 108);">3</div>
<div style="left: 87.5px; top: 166.667px; position: absolute; width: 190.909px; height: 187.5px; line-height: 187.5px; background-color: rgb(170, 24, 236);">9</div>
<div style="left: 87.5px; top: 354.167px; position: absolute; width: 190.909px; height: 145.833px; line-height: 145.833px; background-color: rgb(254, 154, 63);">7</div>
<div style="left: 278.409px; top: 0px; position: absolute; width: 95.1979px; height: 292.453px; line-height: 292.453px; background-color: rgb(254, 154, 63);">7</div>
<div style="left: 373.607px; top: 0px; position: absolute; width: 95.1979px; height: 292.453px; line-height: 292.453px; background-color: rgb(254, 154, 63);">7</div>
<div style="left: 468.805px; top: 0px; position: absolute; width: 46.239px; height: 86.0155px; line-height: 86.0155px; background-color: rgb(225, 170, 209);">1</div>
<div style="left: 515.044px; top: 0px; position: absolute; width: 46.239px; height: 86.0155px; line-height: 86.0155px; background-color: rgb(225, 170, 209);">1</div>
<div style="left: 561.283px; top: 0px; position: absolute; width: 138.717px; height: 86.0155px; line-height: 86.0155px; background-color: rgb(20, 212, 108);">3</div>
<div style="left: 468.805px; top: 86.0155px; position: absolute; width: 57.7988px; height: 206.437px; line-height: 206.437px; background-color: rgb(20, 212, 108);">3</div>
<div style="left: 526.604px; top: 86.0155px; position: absolute; width: 173.396px; height: 206.437px; line-height: 206.437px; background-color: rgb(170, 24, 236);">9</div>
<div style="left: 278.409px; top: 292.453px; position: absolute; width: 38.3264px; height: 103.774px; line-height: 103.774px; background-color: rgb(225, 170, 209);">1</div>
<div style="left: 278.409px; top: 396.226px; position: absolute; width: 38.3264px; height: 103.774px; line-height: 103.774px; background-color: rgb(225, 170, 209);">1</div>
<div style="left: 316.736px; top: 292.453px; position: absolute; width: 19.1632px; height: 207.547px; line-height: 207.547px; background-color: rgb(225, 170, 209);">1</div>
<div style="left: 335.899px; top: 292.453px; position: absolute; width: 57.4897px; height: 207.547px; line-height: 207.547px; background-color: rgb(20, 212, 108);">3</div>
<div style="left: 393.388px; top: 292.453px; position: absolute; width: 172.469px; height: 207.547px; line-height: 207.547px; background-color: rgb(170, 24, 236);">9</div>
<div style="left: 565.857px; top: 292.453px; position: absolute; width: 134.143px; height: 207.547px; line-height: 207.547px; background-color: rgb(254, 154, 63);">7</div>
</div>
<p>7,9,3,7,7,9,1,1,1,7,1,3,1,3,1,9,5,9,3,1</p>
</body>
</body>
</html>