编程技术

Document

php读取文件夹下所有图片，赖加载显示

php读取文件夹下所有图片，赖加载显示

<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>5</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            img{
                display: block;
                width: 500px;
                height: 300px;
            div{
                margin: 100px 0 0 40px;
        </style>
    </head>
    <body>
        <div id="banner">
<?php
    $folder = "./";   // 文件夹路径
    $files = array();
   $handle = opendir($folder);  // 遍历文件夹
    while(false!==($file=readdir($handle))){
        if($file!='.' && $file!='..'){
           $hz=strstr($file,".");
       if($hz==".gif" or $hz==".jpg" or $hz==".JPG"or $hz==".JPEG"or 
       $hz==".PNG"or $hz==".png"or $hz==".GIF") 
           {$files[] = $file; }
         }
      }
    if($files){
        foreach($files as $k=>$v){
            echo '<img src="'.$v.'">';  // 循环显示
        }
    }
  ?>
  </div>
 
        <script type="text/javascript">
            window.onload=function(){
                var banner=document.getElementById("banner"); 
                var imgs=banner.getElementsByTagName("img");
    add();//页面加载完成先执行一次
                function getTop(obj){ //写一个方法获取图片距离top的值
                    var t=0;     　//定义一个保存top值的 变量
                    while(obj){　　//循环获取每个父级定位的top值
                        t+=obj.offsetTop;  //获取传入或改变父级定位的top值，当到大body的时候没有 他的父级定位为null所以就停了
                        obj=obj.offsetParent; //获取obj的父级定位
                        console.log(t)
                        console.log(obj)
                    }
                    return t;
                }
                function add(){
                    var S = document.documentElement.scrollTop || document.body.scrollTop; //获取滑动条距top的值
                    var H = window.innerHeight; //获取显示区域高度（只读）
                    for(var i=0;i<imgs.length;i++){  //循环图片
                        if((S+H) > getTop(imgs[i])){ 判断图片是否进入可视区域
                            imgs[i].setAttribute("src",imgs[i].getAttribute("src")); //当进入的时候给src 赋值
                        }
                 
                window.onscroll=function(){ //每次滚动运行方法判断
                    add()
             
        </script>
    </body>
</html>