gridify瀑布流风格页面的加载更多功能-白红宇

gridify瀑布流风格页面的加载更多功能
阅读量：6037 次
发布时间：2019-06-20
本文共 2788 字，大约阅读时间需要 9 分钟。
页面效果如下：
index.html代码如下：

     
          
      
           
           
           
       
                
        
                 
         
                  
          
                   
           
                    
            
                     
             
                      
              
                       
               
                        
                
                         
                 
                          
                  
                           
                   
                            
                    
                             
                     
                              
                      
                               
                       
                                
                        
                                 
                         
                                  
                          
                                   
                           
                                    
                            
                                     
                             
                                      
                              
                                   
                               
                                    
                                
                                     
                                 
                                          $(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 += '
                                  
                                   ';                                 }                               $('.grid').append(html).gridify(options);                                 lazyload.register();                           }                           else                           {                               $('#msg').html('没有更多了');                            }                  }             })            }                    });