日期:2014-05-16 浏览次数:20737 次
<!DOCTYPE HTML> <html> <head> <title>画廊</title> <meta http-equiv="content-type" content="text/html; charset=gb2312" /> <script src="js/Jquery-1.8.2min.js"></script> <script src="js/jquery.lazyload.js"></script> <script> $(document).ready(function(){ bindImgEvent();//延迟加载 var ajaxStatu=true;//ajax状态,防止鼠标滚动时,多次ajax $(document).mousemove( setTimeoutFun( function(e){ if( ajaxStatu && checkMousePosition(e) ){//ajax更多图片 ajaxStatu = false; var time = new Date().getTime(); $.ajax({ type:'POST', url:'ajaxPic.php?t='+time, dataType:'json', success:function(data){ var html; for(var i in data){ for(var j in data[i]){ html +='<li class="coli"><div class="coliDiv"><a href="#"><img class="imgCon" data-original="images/'+data[i][j]['imgSrc']+'" src="images/loadPic.gif"/></a><div class="imgInfo"><a href="#" class="proName">'+data[i][j]['proName']+'</a><span class="tag"><span class="tagTitle">类别:</span><a href="#" class="tagCon">'+data[i][j]['tagCon']+'</a></span><div></div></li>'; } $('#picUl'+i).append(html); html=''; } bindImgEvent();//为图片绑定延迟加载 ajaxStatu = true; } }); } }, 300) ) }); function setTimeoutFun( func, waitSec, immediate ){ var timeout; return function(){ var context = this, args = arguments; var later = function(){//倒计时结束,执行 timeout = null; if( !immediate ){ func.apply( context, args );//运行函数 } } var callNow = immediate && !timeout; clearTimeout( timeout ); setTimeout( later, waitSec ); if( callNow ){//倒计时还没结束,人为结束 func.apply( context, args ); } } } function bindImgEvent(){ $(".imgCon").lazyload({//延迟加载 effect : "fadeIn", threshold : 200, failure_limit : 100//图片不顺序排列,将 failurelimit 设为 100 令插件找到 100 个不在可见区域的图片是才停止搜索 }); } //检查鼠标的位置是否已经在页面底部 function checkMousePosition(ev){ var pointY; //鼠标的Y坐标 var pageHeight; //页面的高度 if(typeof window.pageYOffset != 'undefined'){ pointY = window.pageYOffset; } else if(typeof document.documentElement != 'undefined'){ pointY = document.documentElement.scrollTop; } else if(typeof document.body != 'undefined'){ pointY = document.body.scrollTop; } pointY += ev.clientY; // 加上鼠标在视窗中的位置 if (window.innerHeight && window.scrollMaxY) { pageHeight = window.innerHeight + window.scrollMaxY; } else if (document.body.scrollHeight > document.body.offsetHeight){ pageHeight = document.body.scrollHeight; } else { pageHeight = document.body.offsetHeight; } if(pageHeight-pointY>600){//鼠标的位置在离底部500px的上方 return false; }else{ return true; } } </script> <style> body{ background:rgb(243,242,243); } *{ font:12px '宋体'; margin:0; padding:0; } #content{ width:1250px !imporant; margin:0 auto; max-width:1250px; min-width:990px; } .column{ float:left; position:relative; top:0px; width:234px; margin-right:15px; list-style:none; display:inline-block; } .coli{ width:234px; position:relative; margin-bottom:15px; box-shadow:0 1px 2px 0 rgba(210, 210, 210, 0.31); -webkit-box-shad