Open qappleh opened 2 years ago
借用了瀑布流的思想
<style> body { width: 100%; height: 100%; } .axsis{ width: 680px; margin: 0 auto; background-color: #ebedf0; display: flex; justify-content: space-between; min-height: 300px; } .item{ width: 200px; transition-duration: 1s; height: 0px; display: flex; justify-content: center; align-items: center; font-size: 24px; color: #fff; font-weight: bold; } </style>
<div class="axsis"> <div class="item" style="background-color: #1989fa;"></div> <div class="item" style="background-color: #fa1989;"></div> <div class="item" style="background-color: #8919fa;"></div> </div>
window.onload = function(){ let arr = [11, 42, 23, 4, 5, 6, 4, 5, 6, 11, 23, 42, 56, 78, 90]; arr.sort((a,b)=>{ return b-a; }); let divs = document.querySelectorAll('.item'); let index = 0; let timer = setInterval(() => { if(index==arr.length){ clearInterval(timer); console.log('OVER'); return ; } let h1 = parseInt(divs[0].style.height||0); let h2 = parseInt(divs[1].style.height||0); let h3 = parseInt(divs[2].style.height||0); let minIndex = 0; let min = h1; for(let i=1;i<divs.length;i++){ if(min>parseInt(divs[i].style.height||0)){ minIndex = i; min = parseInt(divs[i].style.height||0); } } let height = parseInt(divs[minIndex].style.height||0) + arr[index] + 'px' divs[minIndex].style.height = height; divs[minIndex].innerHTML = height index++; }, 800); }
借用了瀑布流的思想