实现网页中常见的瀑布流原理

（每次代码传到csdn博客里都会显得特别乱，以后传图片算了.........）

瀑布流就是将用户上传的图片一列一列显示在页面上，

但是每张图片可能高度不一样，如果不按一定规律添加图片，

会造成有的一列图片特别长，有的一片特别短，

因此我们每次往列表里添加图片时，都会往最矮的那个列表添加图片；

入下图：实现网页中常见的瀑布流原理

3是最矮的那个列表，因此我们往它下面加图，后面的每一次加图都是这样

往最矮的一个列表里加图；接下来用代码解释它吧：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        /*#box {*/
        /*width: 1152px;*/
        /*margin: 0 auto;*/
        /*}*/

        img {
            vertical-align: middle;
        }

        ul, li {
            list-style: none;
        }

        #box ul {
            /*padding: 5px;*/
            /*border: 1px solid #ccc;*/
            float: left;
            list-style: none;
        }

    </style>
</head>
<body>
<div id="box">
</div>


</body>
</html>
<script>

 这里不用ajax在服务器获取数据了，我们就自己建个假的数据吧；

 datas里面代表每次服务器给我们发送的数据
    var datas = [
        {"src": "images/P_000.jpg", "height": 288},
        {"src": "images/P_001.jpg", "height": 288},
        {"src": "images/P_002.jpg", "height": 288},
        {"src": "images/P_003.jpg", "height": 129},
        {"src": "images/P_004.jpg", "height": 284},
        {"src": "images/P_005.jpg", "height": 253},
        {"src": "images/P_006.jpg", "height": 245},
        {"src": "images/P_007.jpg", "height": 343},
        {"src": "images/P_008.jpg", "height": 238},
        {"src": "images/P_009.jpg", "height": 159},
        {"src": "images/P_010.jpg", "height": 289},
        {"src": "images/P_011.jpg", "height": 127},
        {"src": "images/P_012.jpg", "height": 282},
        {"src": "images/P_013.jpg", "height": 144},
        {"src": "images/P_014.jpg", "height": 269},
        {"src": "images/P_015.jpg", "height": 282},
        {"src": "images/P_016.jpg", "height": 142},
        {"src": "images/P_017.jpg", "height": 279},
        {"src": "images/P_018.jpg", "height": 289},
        {"src": "images/P_019.jpg", "height": 262},
        {"src": "images/P_020.jpg", "height": 274},
        {"src": "images/P_000.jpg", "height": 288},
        {"src": "images/P_001.jpg", "height": 288},
        {"src": "images/P_002.jpg", "height": 288},
        {"src": "images/P_003.jpg", "height": 129},
        {"src": "images/P_004.jpg", "height": 284},
        {"src": "images/P_005.jpg", "height": 253},
        {"src": "images/P_006.jpg", "height": 245},
        {"src": "images/P_007.jpg", "height": 343},
        {"src": "images/P_008.jpg", "height": 238},
        {"src": "images/P_009.jpg", "height": 159},
        {"src": "images/P_010.jpg", "height": 289},
        {"src": "images/P_011.jpg", "height": 127},
        {"src": "images/P_012.jpg", "height": 282},
        {"src": "images/P_013.jpg", "height": 144},
        {"src": "images/P_014.jpg", "height": 269},
        {"src": "images/P_015.jpg", "height": 282},
        {"src": "images/P_016.jpg", "height": 142},
        {"src": "images/P_017.jpg", "height": 279},
        {"src": "images/P_018.jpg", "height": 289},
        {"src": "images/P_019.jpg", "height": 262},
        {"src": "images/P_020.jpg", "height": 274}
    ];


        var listNum = parseInt((myClient().width - 17) / 192);
    //    根据窗口宽度和图片宽度确定列表的数目 滚动条默认17宽，192是图片宽
     var ul;
//    申明一个数组用来存每个ul的高度
     var heightArr = [];
     for(var i = 0; i <listNum; i++){
        ul = document.createElement('ul');
        box.appendChild(ul);
        heightArr[i] = 0; //刚创建出来的每个ul高度都是0；
    }
//    根据datas里的数据动态创建li的个数

    loadPic(datas);

//当第一次图片加载完时，如果继续向下滚，继续加载，

加载条件是滚动条卷出去宽度+可视宽度大于最小ul时

window . onscroll = function (){ //获取每一次页面加载后最小那列图（ul）的高度；

   var minVal = getMin(heightArr).value;

 //如果我的可视宽度加上被卷出去的高度大于了最小的那列图


        if(myClient().height + myScroll().scrollTop > minVal){
 //再加载图片
            loadPic(datas); //这是模拟，用ajax在服务器里获取，会有没图的时候。。
        }

    }

        function createPic(datas) {
            //根据datas对象的个数创建li

            for (var i = 0; i < datas.length; i++) {
                var li = document.createElement("li");
//                依次往每个li里面添加图片
                li.innerHTML = '<img src="' + datas[i].src + '" alt="">';
                //取出数组中最小高度的索引值
                var minIndex = getMin(heightArr).index;
                //然后每次我们往这个最矮的ul里加图片
//                其实第一轮时，每个ul的高度都是0；
                lists[minIndex].appendChild(li);
                //添加图片后，更新heightArr中每个ul的高度以便下一次的比较
//
                //由于图片有加载时间，我们可以从服务器先接回图片信息
                //但是我们没有服务器，可以在datas中添加当前图片的信息，在这里进行获取
//
                heightArr[minIndex] += datas[i].height;


            }
        }
    }

 //求一组数中的最小值，等会每组图的列表比较时，会用到它
    function getMin(arr) {
        var minValue = arr[0]; 
        var minIndex = 0;
        for (var i = 0; i < arr.length; i++) {
            if (minValue > arr[i]) {
                minValue = arr[i]; //最小值
                minIndex = i; //最小值的索引
            }
        }
        return {
            index: minIndex,
            value: minValue
        };
    }

 //用来兼容每个浏览器支持的视口的宽度和高度
    function myClient() {
        return {
            width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0,
            height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0
        }
    }

 //用来兼容每个浏览器支持的页面被卷曲的高度和宽度

function myScroll () { return { scrollTop : window . pageYOffset || document . documentElement . scrollTop || document . body . scrollTop || 0 , scrollLeft : window . pageXOffset || document . documentElement . scrollLeft || document . body . scrollLeft || 0 }; } </ script >

秒客网

实现网页中常见的瀑布流原理

相关文章