qappleh / Interview

我是追梦赤子心,公众号「深圳湾码农」的作者,某上市集团公司高级前端开发,深耕前端领域多年,每天攻破一道题,带你从0到1系统构建web全栈完整的知识体系!

Home Page:https://github.com/qappleh/Interview

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Day407: 有一堆整数,请把他们分成三份,确保每一份和尽量相等(11,42,23,4,5,6 4 5 6 11 23 42 56 78 90)

qappleh opened this issue · comments

commented
Day407: 有一堆整数,请把他们分成三份,确保每一份和尽量相等(11,42,23,4,5,6 4 5 6 11 23 42 56 78 90)

借用了瀑布流的**

<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);
        }