瀑布流 +图片自适应+懒加载

伊昂呀

已于 2023-10-20 16:05:23 修改

阅读量368

点赞数

文章标签： javascript 前端 css html5 css3

于 2019-12-14 01:16:39 首次发布

本文链接：https://blog.csdn.net/weixin_45618535/article/details/103535130

版权

瀑布流 +图片自适应+懒加载

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>index</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        img{
            border:0;
        }
        ol, ul ,li{list-style: none;}
        img{
            width:200px;
            position:absolute;
            border-radius:20px;
            transition:0.4s;
            overflow:hidden;
        }
        .hehe{
            opacity:1;
            background: #fff;
            margin-top:0;
        }
    </style>
</head>
<body>
<script type="text/javascript">
     createImg();
     function createImg(){
         //创建img图片标签
        for(var i=0;i<30;i++){
            var setImg=document.createElement("img");
            var ran=Math.floor(Math.random()*(350-50+1)+50);//最大高度随机
            var ran2=Math.floor(Math.random()*(20-1+1)+1);
            var ran3=Math.floor(Math.random()*(350-50+1)+50);//最小高度随机
            var p=(setImg.style.width)/(setImg.style.height);//图片的宽高比
            var minHeight;
            var maxHeight;
            setImg.style.minHeight=ran3/p+"px";//高度除以图片宽高比得到不损坏该比例图片
            setImg.style.maxHeight=ran/p+"px";
            setImg.style.width=200/p;//宽度除以宽高比得到不损坏该比例图片
            setImg.src="picture/"+ran2+".png";
            document.body.appendChild(setImg);
        }
        change();
     }
     function change(){
        //确定图片定位
        var aImg=document.getElementsByTagName("img");//获取图片img
        var ksWidth=document.documentElement.clientWidth;//可视宽度
        var n=Math.floor(ksWidth/210);//横向上可视范围内可以放几张图片
        if(n<=0){return};
        var center=(ksWidth-n*210)/2;//（可视宽度-横向上所有图片总宽度）/2=可视宽度上除图片外的范围的中间值
        var arrH=[];//每一行图片的高度
        for(var i=0;i<aImg.length;i++){
            var j=i%n;//下标/横向上可视范围内可以放几张图片的余数  即当前行的图片个数 aImg不可能只搞一行图片 i/n=第几行......第几个
            if(arrH.length==n){//横向上所有图片的高度都在arrH数组里面了
                var min=findMin(arrH);//找到上一行里面高度最小的那张图片 是第几张 
                aImg[i].style.left=center+min*210+"px";//绝对定位的left值 整体的左侧偏移值+左侧所有图片的宽度
                aImg[i].style.top=arrH[min]+10+"px";//绝对定位的top值 上一行里面最低的高度+10 加的10是为了不与上面一行的那张图片紧贴
                arrH[min]+=aImg[i].offsetHeight+10;
            }else{
                //第一行图片的绝对定位的left值与top值；top为0，left为 可视宽度上除图片外的范围的中间值+其img左侧所有图片的宽度
                arrH[j]=aImg[i].offsetHeight;//第一行所有图片的高度
                aImg[i].style.left=center+210*j+"px";
                aImg[i].style.top=0;
            }
        }
     }
    window.onload=window.onresize=window.onscroll=function(){
        var ksHeight=document.documentElement.offsetHeight;
        var scrollT=document.documentElement.scrollTop||document.body.scrollTop;
        var scrollH=document.body.scrollHeight;
        if(ksHeight+scrollT>=(scrollH-200)){
            createImg();
        }
        var getImg=document.getElementsByTagName("Img");
        for (var i = 0; i < getImg.length; i++) {
            var imgtop = getImg[i].offsetTop;
            if(imgtop<ksHeight+scrollT+300){
                getImg[i].className="hehe";
            }
        };
     }
     function findMin(arr){
        var m=0;
        for(var i=0;i<arr.length;i++){
            m=Math.min(arr[m],arr[i])===arr[m]?m:i;
        }
        return m;
     }
</script>
</body>
</html>

效果图：