In this example, new blocks are added at the beginning of the block and releases them, but it is necessary to add them to the very end and lift them up (block binding to the basement)

for (let i=1; i<10; i++) { setTimeout( function timer(){ $('.id').prepend('<div class="ee">'+i+'</div>'); }, i*1000 ); } 
 .id{ width:200px; height:220px; background:#464c74; } .ee{ width:160px; height:20px; margin-left:20px; background:red; margin-top:5px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <div class="id"></div>

  • in the text of the question you need to put the blocks from the bottom up, not from the top down as written in the title - Alex

1 answer 1

 for (let i = 1; i < 10; i++) { setTimeout(function timer() { $('.id').prepend('<div class="ee">' + i + '</div>'); }, i * 1000); } 
 .id { width: 200px; height: 220px; background: #464c74; display: flex; display: -webkit-flex; -webkit-flex-flow: row wrap; -webkit-align-content: flex-end; -webkit-align-items: flex-end; flex-flow: row wrap; align-content: flex-end; align-items: flex-end; } .ee { width: 160px; height: 20px; margin-left: 20px; background: red; margin-top: 5px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="id"></div>

  • for the correct result then append instead of prepend - Denis Lebedev
  • @DenisLebedev possible. The fact is that in your example 10,9,8,7 ... 1, and not 1,2,3,4 ... 10, so I decided that you need the same sequence of blocks. - Alex
  • Thank you very much, the difficulty arose here, if the parent is longer in length ... they are trying to fill him in one lane, but Denis Lebedev is the column .
  • @DenisLebedev make an example on jsfiddle.net please - Alex
  • jsfiddle.net/w6g4pcy5 to press the bar to the right - Denis Lebedev