页面效果如下：

wKiom1VqpinTmBfKAAtYtFO399A777.jpg

index.html代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{margin:0}

    </style>
</head>
<body>

    <div class="grid" start="0">
        <img src="p_w_picpath/1.jpg" width="250">
        <img src="p_w_picpath/2.jpg" width="250">
        <img src="p_w_picpath/3.jpg" width="250">
        <img src="p_w_picpath/4.jpg" width="250">
        <img src="p_w_picpath/5.jpg" width="250">
        <img src="p_w_picpath/6.jpg" width="250">
        <img src="p_w_picpath/7.jpg" width="250">
        <img src="p_w_picpath/8.jpg" width="250">
        <img src="p_w_picpath/9.jpg" width="250">
        <img src="p_w_picpath/10.jpg" width="250">
        <img src="p_w_picpath/11.jpg" width="250">
        <img src="p_w_picpath/12.jpg" width="250">
        <img src="p_w_picpath/13.jpg" width="250">
        <img src="p_w_picpath/14.jpg" width="250">
        <img src="p_w_picpath/15.jpg" width="250">
        <img src="p_w_picpath/16.jpg" width="250">
        <img src="p_w_picpath/17.jpg" width="250">
        <img src="p_w_picpath/18.jpg" width="250">
        <img src="p_w_picpath/19.jpg" width="250">
        <img src="p_w_picpath/20.jpg" width="250">
        <img src="p_w_picpath/21.jpg" width="250">
        <img src="p_w_picpath/22.jpg" width="250">
    </div>

    <div id="msg" style="text-align:center;position: relative;"></div>
    <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="js/gridify.js"></script>
    <script type="text/javascript">
        $(window).load(function() {
            var options =
            {
                srcNode: 'img',             // grid items (class, node)
                margin: '20px',             // margin in pixel, default: 0px
                width: '250px',             // grid item width in pixel, default: 220px
                max_width: '',              // dynamic gird item width if specified, (pixel)
                resizable: true,           // re-layout if window resize
                transition: 'all 0.5s ease' // support transition for CSS3, default: all 0.5s ease
            }
            $('.grid').gridify(options);
            
            /**

            *      lazyload.js  

            *  当滚动条到页面最底端时 自动加载数据
             * cfg 配置参数数组
             * { 
             *  loadfunc:自定义加载函数的名称
             * }
             * doc 兼容IE FF 的网页dom对象
             * load 触发自定义加载函数   加载内容
             * setcfg 接受用户传入的配置参数
             * init 给浏览器绑定滚动条事件
             * scroll 浏览器滚动触发的回调函数
             * 
             * 注意 请不要将用于标记的DIV设为display:none 否则将无法得到offsetTop的值
             */
            var lazyload = {
             
                 cfg:{loadfunc:null},
                      
                 load:function(){
                          if(typeof eval(this.cfg.loadfunc) == 'function'){
                                   this.destroy();//注销滚动条事件
                                   eval(this.cfg.loadfunc+'();');//调用处理函数
                                   return;
                          }
                          alert('请确认加载函数是否已经定义?');
                 },
             
                 setcfg:function(a){//a 为array
                       if(typeof a == 'object'){//判断a 是否为数组
                           for(var key in a){
                                this.cfg[key] = a[key];//将配置的值赋给lazyload对象的配置参数
                           }
                           return;
                  }
                      alert('请确认配置参数格式是否正确?');
                 },
             
                 register:function(){//初始化 给浏览器绑定滚动事件
                      if(window.attachEvent){//IE
                               window.attachEvent("onscroll",this.scroll,false);
                      }else{//FF
                               window.addEventListener("scroll",this.scroll,false);
                      }
                 }
                 ,
                 scroll:function(){//滚动条 开始滚动 并计算是否到达底部
                       //判断滚动条滚到了网页最底部
                        if (document.compatMode == "BackCompat")   
                        {  
                            a = document.body.clientHeight;  
                            b = document.body.scrollTop;  
                            c = document.body.scrollHeight;
                        }   
                        else // document.compatMode == "CSS1Compat"  
                        {  
                            a = document.documentElement.clientHeight;  
                            b = document.documentElement.scrollTop==0?document.body.scrollTop:document.documentElement.scrollTop;  
                            c = document.documentElement.scrollHeight;
                        }
                         //console.log('a:'+a+'; b:'+b+'; c:'+c);
                       if(a+b == c){
                            lazyload.load();//开始加载
                       }
                 }
                 ,
                 destroy:function(){//注销onscroll事件 防止加载数据的时候继续加载
                          if(window.attachEvent){
                               window.detachEvent("onscroll",this.scroll,false);  
                          }else{
                                   window.removeEventListener("scroll",this.scroll,false);
                          }
                 }
             
            };
            
            lazyload.setcfg({
                loadfunc : "loadcomment",//加载数据的方法名
           });
    
           lazyload.register();//注册滚动条事件
           
           function loadcomment(){
                 //请求加载内容
                 //加载完毕后 内容更新  重新注册事件
                 var start = $('.grid').attr('start');
                 start = parseInt(start)+10;
                 $('.grid').attr('start', start);
                 $.ajax({
                      type: "POST",
                      url: "action.php",
                      data: "start="+start,
                      dataType: "json",
                      success:function(data){
                           /*....
                               将得到的内容 放入要刷新的框中
                           ....*/
                           if(data.length > 0)
                           {
                               var html = '';
                               for(var i in data)
                               {
                                   html += '<img src="p_w_picpath/'+data[i]+'.jpg" width="250">';  
                               }
                               $('.grid').append(html).gridify(options);  
                               lazyload.register();
                           }
                           else
                           {
                               $('#msg').html('没有更多了'); 
                           }
                  }
             })
            }
            
        });
    </script>

</body>
</html>

源程序下载地址：http://down.51cto.com/data/2055571