照片瀑布

最新推荐文章于 2024-07-16 17:56:11 发布

chongtingge6113

最新推荐文章于 2024-07-16 17:56:11 发布

阅读量89

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/middenEurope/blog/819527

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
    #outer{
        width: 600px;
        height: auto;
        margin: 50px auto;
        border:1px red solid;
    }
    #outer img{
        width: 100%;
        height: auto;
    }
    </style>
</head>
<body>
    <div id="outer"></div>
    <script type="text/javascript">

    var num=0;
    var outer=document.getElementById("outer");
    for(var i=0;i<4;i++){
        createImage();
    }


    function createImage(){
        var img=document.createElement("img");
        if(num>=10){
            img.setAttribute("src", "image/0"+num+".jpg");
        }else{
              img.setAttribute("src", "image/00"+num+".jpg");
        }
        num++;
        console.log(img);
        outer.appendChild(img);
    }
    window.onscroll=function(){
      var browserHeight = document.documentElement.clientHeight;//浏览器高度
            var docHeight = document.documentElement.offsetHeight;
            var docScrollTop = document.documentElement.scrollTop||window.pageYOffset;//已滚动的高度
            console.log(browserHeight,docHeight,docScrollTop);
            console.log(docHeight-browserHeight-docScrollTop);
        if (docHeight - browserHeight - docScrollTop <= 250) {
            if(num<=15){
                 createImage();
            }
            else{
                console.log("picture is over");
            }   
            
        };
    }
   
    </script>
</body>
</html>

createImage读取照片

window.onscroll判断是否达到底部然后读取照片方法

转载于:https://my.oschina.net/middenEurope/blog/819527