固定列瀑布流

作者: 一只小裸熊 | 来源:发表于2016-08-06 21:00 被阅读0次

固定列瀑布流
js瀑布流思路
7. 多列
瀑布流使用小框架
瀑布流
iOS 瀑布流基本实现
【iOS】瀑布流的实现
2.1-瀑布流布局原理
H5 开发实战记录（持续更新）
多列实现瀑布流

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{margin:0;padding:0;}
        .wrap{width: 600px;
            margin:0 auto;
            padding:20px 10px;
            border:1px solid #999;
            overflow: hidden;}

        .wrap ul{
            float:left;
            width: 200px;
            list-style: none;
            padding:0 10px;
            /*怪异和模型*/
            box-sizing:border-box;
        }
        .wrap ul li{
            background-color: #ccc;
            margin-bottom: 20px;
            font-size: 10px;
        }
    </style>
</head>
<body>
    <div class="wrap"id="wrap">
        <ul></ul>
        <ul></ul>
        <ul></ul>
    </div>

</body>
    <script>
    //总函数
    function flowFn(){
        //获取元素
         var wrap=document.getElementById('wrap');
         var list=document.getElementsByTagName('ul');

         //设置一个随机函数
         function randFn(max,min){
            var rand=parseInt(Math.random()*(max-min)+min);
            return rand;
         }
         //创建li元素 函数
         function createLi(){
            //创建10li
            for(var i=0;i<10;i++){
                var li=document.createElement('li');
                //为li文本内容
                // li.innerHTML=i;
                // 随机获得一个高度
                var height=randFn(100,300);
                //将随机的高赋值给li
                li.style.height=height+"px";
                //创建一个数组
                var heightArr=[];

                //获取最小高度下标
                var minIndex=0;
                //循环获取元素高度
                for(var j=0;j<list.length;j++){
                    //获取list数组中每个元素的高度,并放入空的数组中
                    heightArr.push(list[j].offsetHeight)
                    // 假定数组0下标的值最小
                    var minHeight=heightArr[0];
                    //
                     if(minHeight>heightArr[j]){
                        //将最小值给minHeight
                        minHeight=heightArr[j];
                        //获取到最小的高度下标
                        minIndex=j;
                     }
                }
                //将li优先添加到高度最小的ul中,目的就是使高度均衡
                list[minIndex].appendChild(li);
            }
         }
            createLi();
    }
        flowFn();
    </script>
</html>

Paste_Image.png