网站地图    收藏   

子栏目

主页 > 前端 > javascript >

js ajax淘宝瀑布流效果代码

来源：自学PHP网    时间：2014-09-19 14:47 作者： 阅读:次

[导读] 本文章给大家介绍一个js ajax淘宝瀑布流效果代码，原理是,布局一个Ul里面有4个li；1，ajax获取数据2，滚动条触发时，进行判断最小高的li，添加div数据（用到oImages.onload）了。...

瀑布流

 代码如下 复制代码

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
body,ul,p,h2,h3{margin:0;padding:0;}
li{list-style:none};
a {text-decoration:none;}
h3 {font:14px "微软雅黑";}
strong { font-weight:normal; font-size:12px; color:#808080;height:24px; line-height:24px; float:left; padding:0 7px; cursor:pointer;}
.clear{zoom:1}
.clear:after{content:"";display:block;clear:both;}
.parent{width:1000px; overflow:hidden; margin:50px auto 0;}
.parent li { width:240px; float:left;margin-right:10px;overflow:hidden;}
.parent li div[class='tag']{width:229px;border:1px solid #b6b6b6; margin-bottom:10px; border-top:4px solid #6f6f6f; padding:12px 0 0 9px;}
.parent li:first-child a{ background:#f0f0f0; text-decoration:none; margin:4px 5px 5px 0;display:inline-block; height:22px; line-height:22px; font-size:12px; color:#a0a0a0; padding:0 10px; border:1px solid #e2e2e2; border-radius:20px;}
.parent li:first-child a:nth-of-type(1) { background:#ff9231; color:#fff;}
.parent li:last-child{margin-right:0;}
.parent li div[class='boBtn'] { width:221px; margin:10px 0 0 -10px; padding-top:17px;}
.parent li div[class='boBtn'] div {margin-bottom:10px;}
.parent li div[class='boBtn'] p{ float:left; height:24px; line-height:24px; background:#fefefe;margin-bottom:6px; border-radius:15px;-webkit-border-radius:15px;-moz-border-radius:15px; border:1px solid #ddd; overflow:hidden;}
.parent li div[class='boBtn'] span { float:left; padding:0 10px; font-size:12px; height:24px; line-height:24px;}
.active  { background:#ff9231; color:#fff;}
.parent .pic {margin-bottom:10px; border:1px solid #dadada; overflow:hidden; }
.parent .pic h3 { padding-top:5px;height:20px; line-height:20px; text-align:center; color:#00c0ff; text-shadow:1px 1px 3px rgba(255,255,255,.5)}
.parent .pic p {  font-size:12px; color:#aaa;padding:5px 10px; text-indent:2em; line-height:20px; background:#fbfbfb;color:#aaa;}
img { width:240px; border:none; vertical-align:top; }
#loader { width:100%;height:31px; background:url(h/web/img/loading33_31.gif) 50% 0 no-repeat; position:fixed; bottom:0;left:0;}
</style>
<script  type="text/javascript">
function ajax(opt) {
 var oAjax = null;
 
 opt.method = opt.method || 'get';
 opt.url = opt.url || '';
 opt.data = opt.data || '';
 opt.dataType = opt.dataType || 'text';
 opt.fnSuc = opt.fnSuc || function() {};
  
 if (window.XMLHttpRequest) {
  oAjax = new XMLHttpRequest();
 } else {
  oAjax = new ActiveXObject('Microsoft.XMLHTTP');
 }
 
 if (opt.method == 'get' && opt.data) {
  opt.url += '?' + opt.data;
 }
 
 oAjax.open(opt.method, opt.url, true);
 if (opt.method == 'get') {
  oAjax.send();
 } else {
  oAjax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  oAjax.send(opt.data);
 }
 
 oAjax.onreadystatechange = function() {
  if (oAjax.readyState == 4) {
   if (oAjax.status == 200) {
    
    var content = '';
    
    switch(opt.dataType) {
     case 'text':
      content = oAjax.responseText;
      break;
     case 'json':
      content = JSON.parse(oAjax.responseText);
      break;
     /*case 'xml':
      content = oAjax.responseXML;
      break;*/
    }
    
    
    opt.fnSuc(content);
    
   }
  }
  
 }
}
</script>
<script  type="text/javascript">

function startMove(obj, json, fn) {
 clearInterval(obj.iTimer);
 var iCur = 0;
 var iSpeed = 0;
 obj.iTimer = setInterval(function() {
  var iBtn = true;
  for (var attr in json) {
   
   if (attr == 'opacity') {
    iCur = Math.round(css(obj, 'opacity') * 100);
   } else {
    iCur = parseInt(css(obj, attr));
   }
   iSpeed = (json[attr] - iCur) / 8;
   iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
   if (iCur != json[attr]) {
    iBtn = false;
    if (attr == 'opacity') {
     obj.style.opacity = (iCur + iSpeed) / 100;
     obj.style.filter = 'alpha(opacity='+(iCur + iSpeed)+')';
    } else {
     obj.style[attr] = iCur + iSpeed + 'px';
    }
   }
   
  }
  
  if (iBtn) {
   clearInterval(obj.iTimer);
   fn && fn.call(obj);
  }
  
 }, 30);
}

function css(obj, attr) {
 if (obj.currentStyle) {
  return obj.currentStyle[attr];
 } else {
  return getComputedStyle(obj, false)[attr];
 }
}
</script>
</head>

<body>
<ul class="parent clear">
    <li>
    <div class="tag">
        <a href="#">全部</a>
        <a href="#">连衣裙</a>
        <a href="#">夏装</a>
        <a href="#">雪纺</a>
        <a href="#">东大门</a>
        <a href="#">半身裙</a>
        <a href="#">短裙</a>
        <a href="#">长裙</a>
        <a href="#">衬衫</a>
        <a href="#">T恤</a>
        <a href="#">韩版</a>
        <a href="#">帮我挑</a>
        <a href="#">9块9也能穿</a>
        <a href="#">50元美衣</a>
        <a href="#">裤子</a>
        <a href="#">打底裤</a>
        <a href="#">内衣</a>
        <a href="#">混搭</a>
        <a href="#">印花</a>
        <a href="#">牛仔</a>
        <a href="#">比基尼</a>
        <a href="#">蕾丝</a>
        <a href="#">八卦穿搭</a>
        <a href="#">印花</a>
        <a href="#">知识库</a>
        <div class="boBtn">
            <div class="clear"><span>分类</span><p><strong>全部</strong><strong>宝贝</strong><strong class="active">文章</strong><strong>专辑</strong></span></p></div>
            <div class="clear"><span>排行</span><p><strong>最热</strong><strong class="active">最新</strong></span></p></div>
        </div>
        </div>
       
    </li>
    <li>
        <!--<div class="pic">
            <img src="img/4.jpg" />
            <h3>dang0529加入夏天就要穿裙...</h3>
            <p>圆领简单舒适，加上金属的配饰，打破常规，不觉得单调，更显出独特的性格，高贵优...</p>
        </div>-->
   
    </li>
    <li></li>
    <li></li>
</ul>
<div id="loader">
</div>
</body>
</html>
<script>


    var oParent=getByClass('parent')[0];
    var oLoader=document.getElementById('loader');
    var aLi=oParent.getElementsByTagName('li');
    var iPage=1;
    var iOpen=true;
    function fnMove() { //鼠标经过图片透明度变化
        var aDiv=getByClass('pic');
       
        for(var i=0;i<aDiv.length;i++) {
        var oImg=aDiv[i].getElementsByTagName('img')[0];
            oImg.onmouseover=function() {
                this.style.filter='alpha(opacity:60)';
                this.style.opacity=0.6;
            }
            oImg.onmouseout=function() {
                this.style.filter='alpha(opacity:100)';
                this.style.opacity=1;
            }
        }
    }
   
   
    showList(); //初始化加载第一批图片
    window.onscroll=function() {
       
        var _index= iMin(); //最小高度li的下标
        var oLi=aLi[_index];    //最小高度的li
        var ih=pos(oLi)+oLi.offsetHeight;
        if(ih<(viewH()+scrollY())) {
            showList()
            oLoader.style.display='block';  //等待旋转图标
        }
    };
   
    function showList() {
        if(!iOpen) return;
             iOpen=false;
            iPage++;
            //document.title=iPage; 测试加载到第几批数据
            ajax({
                url     :   'js/getPics.php',
                data    :   'cpage=' + iPage,
                dataType:   'json',
                fnSuc:function(j) {
                    if(j.code==0) {
                        var w=j.data.data;
                        var i=0;
                        function show1() {
                            var oDiv=document.createElement('div');
                            var oImg=document.createElement('img');
                            var oH3=document.createElement('h3');
                            var oP=document.createElement('p');
                            oDiv.className='pic';
                            oH3.innerHTML=w[i].favContAlbum || w[i].title || '暂无信息';
                            oP.innerHTML=w[i].favContTitle || '暂无介绍';
                            oDiv.appendChild(oImg);
                            oDiv.appendChild(oH3);
                            oDiv.appendChild(oP);
                            oImg.src='';
                            aLi[iMin()].appendChild(oDiv);
                            fnMove();//调用经过事件
                           
                            if(w[i].imageUrl) {
                                oImages=new Image();
                                oImages.onload=function() {
                                    oImg.src=this.src;
                                    oImg.style.filter='alpha(opacity:0)';   //图片加载完成时，进行透明度变化
                                    oImg.style.opacity=0;
                                    startMove(oImg,{
                                    opacity:100
                                    });
                                    oLoader.style.display='none';
                                    if(i<w.length-1) {
                                        i++
                                        show1();   
                                    }else {
                                        iOpen=true;
                                    }
                                }
                                oImages.src=w[i].imageUrl;
                                   
                            }else {             //当图片加载失败走这里
                                if(i<w.length-1) { 
                                        i++
                                        show1();   
                                }else {
                                    iOpen=true;
                                }
                            }  
                           
                        }
                        show1();
                       
                    }else { // if(code==0)结尾
                        return;
                    }
                }
            })
    }

   
   

    //函数封装
    function iMin() {
        var ih=aLi[0].offsetHeight;
        var _index=0;
        for(var i=1;i<aLi.length;i++) {
            if(ih>aLi[i].offsetHeight) {
                ih=aLi[i].offsetHeight;
                _index=i;  
            }
        }
        return _index;
    }

    function getByClass(sClass,parent) {
        var aEle=(parent || document).getElementsByTagName('*')
        var arr=[];
        var re=new RegExp('\b' + sClass + '\b');
        for(var i=0;i<aEle.length;i++) {
            if(re.test(aEle[i].className)) {
                arr.push(aEle[i]); 
            }
           
        }
        return arr;
    }
   
    function pos(obj) {
        var iTop=0;
        while(obj) {
            iTop +=obj.offsetTop;
            obj=obj.offsetParent;
        }
        return iTop;
       
    }
    function viewH() {
        return document.documentElement.clientHeight;  
    }
    function scrollY() {
        return document.documentElement.scrollTop || document.body.scrollTop;  
    }
   
</script>

最新评论

    加载更多~~

    添加评论

    更多文章推荐

    自学PHP网专注网站建设学习,PHP程序学习,平面设计学习，以及操作系统学习

    京ICP备14009008号-1@版权所有www.zixuephp.com

    网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱904561283@qq.com

    添加评论