瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest，逐渐在国内流行开来。

    <style>
        .flowul{
            position:relative;
            min-width:200px;
        }
        .flowul li{
            margin:0;
            padding:0;
            list-style-type:none;
            position:absolute;
            margin-bottom:10px;
            font-size:30px;
            text-align:center;
            color:black;
        }
    </style>
    <ul class="flowul"></ul>
    <script>
        var flowul=document.querySelector(".flowul");
        var window_W;//定义窗口的宽度
        var col;//定义列数
        var old;//定义现在的列数
        var arr=[];

        getWidth();
        old=col;//先给其一个当前的列数

        function getWidth(){
            arr=[];
            window_W=document.body.currentStyle?document.body.currentStyle.width:getComputedStyle(document.body,[]).width;//根据浏览器类型，选择合适的代码获取宽度
            window_W=parseInt(window_W);
            col=parseInt((window_W-30)/400);
            flowul.width=col*210-10+"px";
            for(i=0;i<col;i++){
                arr.push(0);
            }
        }

        //开始循环，排列出来所需要的li(及其个数)
        for(var i=0;i<20;i++){
            var newLi=document.createElement("li");
            newLi.style.width=200+"px";
            newLi.style.backgroundColor="rgb("+getRandom(0,255)+","+getRandom(0,255)+","+getRandom(0,255)+")";
            newLi.innerHTML=i+1;
            var newHeight=getRandom(150,300);
            newLi.style.height=newHeight+"px";
            newLi.style.lineHeight=newHeight+"px";
            //判断数组最小值及其对应下标            
            var minH=arr[0];
            var minNum=0;
            for(var j=1;j<arr.length;j++){
                if(minH>arr[j]){
                    minH=arr[j];
                    minNum=j;
                }
            }
            newLi.style.left=minNum*210+"px";
            newLi.style.top=arr[minNum]+"px";
            flowul.appendChild(newLi);
            arr[minNum]+=newHeight+10;
        }
        ulHeight();
        //当浏览器宽度发生改变时，对li重新定位
        window.onresize=function(){
            getWidth();
            if(old==col){
                return;//当列数没有发生改变时，跳出
            }else{
                old=col;
            }
            //通过循环改变li的位置
            for(var i=0;i<20;i++){
                var lis=document.querySelectorAll(".flowul li");
                lis[i].style.transitionDuration="3s";
                var newHeight=parseInt(lis[i].style.height);
                var minH=arr[0];
                var minNum=0;
                for(var j=1;j<arr.length;j++){
                    if(minH>arr[j]){
                        minH=arr[j];
                        minNum=j;
                    }
                }
                lis[i].style.left=210*minNum+"px";
                lis[i].style.top=arr[minNum]+"px";
                arr[minNum]+=newHeight+10;
            }
            ulHeight();            
        }
        function ulHeight(){
            var maxH=arr[0];
            var maxNum=0;
            for(var j=1;j<arr.length;j++){
                if(minH<arr[j]){
                    maxH=arr[j];
                    maxNum=j;
                }
            }
            flowul.style.height=arr[maxNum]+"px";
        }
        function getRandom(min,max){
            return Math.round(Math.random()*(max-min)+min);
        }
    </script>