Результат должен таким получиться?
<style>
.cell {
position:absolute;
width: 150px;
}
</style>
<div class="cont">
</div>
<script>
var container = document.querySelector(".cont");
var color = ["red","blue","green"],
tp = [], height = [];
for(var i=0;i<3;i++){
tp[i] = []; height[i] = [];
for(var j=0;j<4;j++){
var cell = document.createElement('div');
cell.style.backgroundColor = color[i];
cell.style.left = (10 + j * 160 ) + "px";
height[i][j] = Math.random() * 130 + 20;
cell.style.height = height[i][j] + "px";
tp[i][j] = i == 0? 10:(tp[i - 1][j] + height[i - 1][j] + 10) ;
cell.style.top = tp[i][j] + "px";
cell.classList.add("cell");
container.appendChild(cell);
}
}
</script>
|