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

客官°小女子只卖身不卖艺 2022-06-18 09:49 252阅读 0赞

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

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

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

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

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

入下图：![Center][]

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>

[Center]: /images/20220618/8dfe3affbca24915bf4f5aa2217eaf88.png