图片瀑布流显示

最新推荐文章于 2023-07-28 16:13:34 发布

cp123153

最新推荐文章于 2023-07-28 16:13:34 发布

阅读量352

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/cp123153/article/details/104233763

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box1{
            width: 1050px;
            margin: 0 auto;
            border: 1px solid black;
            position: relative;
        }
        .box2{
            position: absolute;
            border: 1px solid black;
            padding: 4px;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2">
            <img src="images/P_000.jpg" alt=""/>//图片没有上传
        </div>
        <div class="box2">
            <img src="images/P_001.jpg" alt=""/>
        </div>
        <div class="box2">
            <img src="images/P_002.jpg" alt=""/>
        </div>
        <div class="box2">
            <img src="images/P_003.jpg" alt=""/>
        </div>
        <div class="box2">
            <img src="images/P_004.jpg" alt=""/>
        </div>
        <div class="box2">
            <img src="images/P_005.jpg" alt=""/>
        </div>
        <div class="box2">
            <img src="images/P_000.jpg" alt=""/>
        </div>
        <div class="box2">
            <img src="images/P_001.jpg" alt=""/>
        </div>
        <div class="box2">
            <img src="images/P_002.jpg" alt=""/>
        </div>
        <div class="box2">
            <img src="images/P_003.jpg" alt=""/>
        </div>
        <div class="box2">
            <img src="images/P_004.jpg" alt=""/>
        </div>
        <div class="box2">
            <img src="images/P_005.jpg" alt=""/>
        </div>
    </div>
</body>
<script>
    window.onload=function(){

        /*1.算出图片之间的间隔、几列
        1.5确定图片位置
        2.在最矮的图片下显示图片
        3.超出的文档高度>最短的数组高度加载图片*/

/*一个数字记录每一列的高度，便利数组找到最短的那一列，接下来的图片就显示在此列下面。然后更新此列的高度*/

        var arr=[];
        var box1=document.getElementsByClassName('box1')[0];
        var box2=document.getElementsByClassName('box2');

        var box1Width=box1.offsetWidth;
        var box2Width=box2[0].offsetWidth;

        var columns=parseInt(box1Width/box2Width);
        var pad=(box1Width-box2Width*columns)/(columns-1);

        waterfall();

        window.onscroll=function(){
            if(window.pageYOffset+window.innerHeight>getMin(arr).min){
                var json=[
                    {"src":"./images/P_007.jpg"},
                    {"src":"./images/P_008.jpg"},
                    {"src":"./images/P_009.jpg"},
                    {"src":"./images/P_010.jpg"},
                    {"src":"./images/P_011.jpg"},
                    {"src":"./images/P_012.jpg"},
                    {"src":"./images/P_013.jpg"},
                    {"src":"./images/P_014.jpg"},
                    {"src":"./images/P_015.jpg"},
                    {"src":"./images/P_016.jpg"},
                    {"src":"./images/P_017.jpg"},
                    {"src":"./images/P_018.jpg"},
                    {"src":"./images/P_019.jpg"}
                ];

                for(var i=0;i<json.length;i++){
                    var div=document.createElement('div');
                    div.className='box2';
                    var img=document.createElement('img');
                    img.src=json[i].src;
                    div.appendChild(img);
                    box1.appendChild(div);
                }
                waterfall();
            }
        }
function waterfall(){
    for(var i=0;i<box2.length;i++){
            if(i<columns){
                box2[i].style.left=i*pad+i*box2Width+'px';//记得+'px'
               arr[i]=box2[i].offsetHeight;
            }else{
                
                var min=getMin(arr).min;
                var index=getMin(arr).index;

                box2[i].style.top=min+pad+'px';
                box2[i].style.left=index*box2Width+index*pad+'px';

                //要更新
                arr[index] +=box2[i].offsetHeight+pad;//不用加px,都是数字嘛~
            }
        }

}
        
        function getMin(arr){
            var obj={};
            obj.min=arr[0];
            obj.index=0;
            for(var i=1;i<arr.length;i++){

                if(obj.min>arr[i]){
                    obj.min=arr[i];
                    obj.index=i;
                }
            }
            
            return obj;

        }

    }
</script>
</html>

cp123153

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片瀑布流显示

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
复制链接

扫一扫