1.复制下面代码到demo.html文件。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title>Index</title>
        <style type="text/css">
            body{background:lightgreen;}
            #water li{float:left;list-style:none;}
            #water li div{background:white;padding:4px;margin:2px;}
            img{border:2px solid black;}
        </style>
    </head>
    <body>
        
    </body>
    <script>
        var pwidth = 220;                   //图片的固定宽度
        var timmer;                        //保证滚动只执行一次
        var timmer1;                       //保证调整尺寸只执行一次
        var lieshu;                        //用于调整尺寸的时候,优化
        var data;                          //将现有数据缓存起来,调整尺寸的时候直接处理数据而不用去请求数据

        //初始化操作
        window.onload = function(){
            lieshu = cols();
            addul(lieshu);
            getdata();
        }

        //滚动条滚动的时候触发
        window.onscroll = function(){
            //通过一个延时,来确保只会执行一次
            if(timmer){
                clearTimeout(timmer);
                timmer = undefined;
            }

            timmer = setTimeout(function(){
                //什么时候动态加载    当剩余高度小于指定值
                //获取三高
                //获取文档的高度
                var dheight = document.documentElement.scrollHeight;
                //这个是获取滚动条高度,后面是解决chrome兼容性
                var sheight = document.documentElement.scrollTop || document.body.scrollTop;
                var wheight = document.documentElement.clientHeight;
                document.title = '文:'+dheight+'滚:'+sheight+'窗:'+wheight;
                if(dheight - sheight - wheight < 300){
                    //我们只需要调用这个方法,这个方法会使用ajax去获取数据,然后调用process方法处理数据
                    getdata();
                }
            },100);
        }

        //在窗口尺寸改变的时候,我们要自适应
        window.onresize = function(){
            //alert(1);
            var num = cols();
            if(num != lieshu){
                if(timmer1){
                    clearTimeout(timmer1);
                    timmer1 = undefined;
                }
                timmer1 = setTimeout(function(){
                    var ul = document.getElementById('water');
                    document.body.removeChild(ul);
                    lieshu = cols();
                    addul(lieshu);
                    //getdata();
                    process(data);
                },100);
            }
            
        }


        //计算出列数
        function cols(){
            var num = Math.floor((document.body.offsetWidth - 25) / (pwidth + 20));
            return num;
        }


        //准备好一个结构(框架)
        function addul(num){
            var ul = document.createElement('ul');
            ul.id = 'water';
            //我们要插入4个li
            for(var i = 0;i<num;i++){
                var li = document.createElement('li');
                ul.appendChild(li);
            }

            document.body.appendChild(ul);
        }

        //获取数据
        function getdata(){
            var ajax = getAjax();
            ajax.open('GET','photo.php',true);
            ajax.send();
            ajax.onreadystatechange = function(){
                if(ajax.readyState == 4 && ajax.status == 200){
                    //alert(ajax.responseText);
                    //在这里要做很多操作
                    data = ajax.responseText;
                    process(data);
                }
            }
        }

        //处理数据
        function process(json){
            var obj = eval('('+json+')');
            //alert(obj.length);
            for(var i=0;i<obj.length;i++){
                //一张图片的名字
                var img = obj[i];
                var div = document.createElement('div');
                div.innerHTML = '<img src="./uploads/'+img+'" width="'+pwidth+'"/>';
                var ul = document.getElementById('water');
                var lis = ul.children;

                //将我们的到的div(包裹了图片)插入到最短的一个li里面
                var mask = -1;     //所有列里面最小的高度
                for(var j=0;j<lis.length;j++){
                    var height = lis[j].offsetHeight;
                    //alert(1);
                    if(mask == -1 || mask > height){
                        //最小的高度不是最小的
                        mask = height;
                        lis[j].appendChild(div);
                    }
                }
                
            }
        }



        //解决ajax兼容性
        function getAjax(){
            var ajax;
            if(window.XMLHttpRequest){
                ajax = new XMLHttpRequest();
            }else{
                ajax = new ActiveXObject('Microsoft.XMLHTTP');
            }
            return ajax;
        }
    </script>
</html>

2.复制下面代码到photo.php文件。

<?php
    //模拟数据库取数据
    $arr = array();

    //目录操作读取出所有文件名
    $handle = opendir('./uploads');
    while($file = readdir($handle)){
        if($file == '.' || $file =='..') continue;
        $arr[] = $file;
    }
    closedir($handle);
    
    echo json_encode($arr);
    
?>

3.新建一个uploads文件夹,在里面放入约20张图片。

4.用localhost 访问 demo.html 文件即可看到效果。