js ajax淘宝瀑布流效果代码

 代码如下 复制代码

<!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>
时间： 2024-10-02 01:41:29

js ajax淘宝瀑布流效果代码的相关文章

js实现的美女瀑布流效果代码_javascript技巧

I like TRY △回顶部

使用JS实现图片展示瀑布流效果的实例代码_javascript技巧

不知大家有没有发现,一般的图片展示网站都会使用瀑布流效果,所谓的瀑布流 就是网站内的图片不会一下子全缓存出来,而是等你滚动到一定的距离的时候, 下面的图片才会继续缓存,并且图片也是随机出现的,只是宽度一样,高度并不 一样,高高低低就像瀑布一样,所以叫做瀑布流效果.下面我把代码给大家,大家 随便下几张图片试试. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&qu

利用JS实现简单的瀑布流效果

哈哈, 我又来啦, 在这一段时间里, 我简单的学习了一下javascript(JS), 虽然不是很懂啦, 但是我也简单的尝试着做了点小东西, 就比如现在流行的瀑布流效果, 经过我的努力终于成功的完成了, 虽然中间非常的坎坷, 并不是一帆风顺但是最终我还是实现了个简单的效果, 下面就为大家简单的介绍下, 不知道的友友们, 有兴趣的话, 可以来参考下, 欢迎指出缺点和不足! 一.瀑布流之准备工作    首先声明下, 为了方便演示和联系, 我使用的是本地图片, 如果大家有需要的话可以尝试着写下网络的,

原生js实现移动端瀑布流式代码示例_javascript技巧

瀑布流布局已成为当今非常普遍的图片展示方式,无论是PC还是手机等移动设备上.最近使用到了"懒加载",现在更新一般,因为平时主要使移动端的开发所以库文件使用的是zepto.js .当然也可以和jQuery 通用. 代码如下: function loadImgLazy(node) { var lazyNode = $('[node-type=imglazy]', node), mobileHeight, lazyOffSetHeight, tempHeight, currentNodeTo

JS仿淘宝实现的简单滑动门效果代码_javascript技巧

本文实例讲述了JS仿淘宝实现的简单滑动门效果代码.分享给大家供大家参考.具体如下: 这是一个简单的仿淘宝滑动门效果代码,个人感觉真的挺不错,以前有过一款和这个差不多.在滑动门里你可以再次布局你的网页,可以做成一个功能超强大的导航,原示例是一个拼音索引程序,改成菜单也是可以的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-f-taobao-simple-hdm-style-demo/ 具体代码如下: <!DOCTYPE html PUBL

JavaScript实现图片自动加载的瀑布流效果_javascript技巧

先给大家展示下效果图: 向下滑动网页的时候能够自动加载图片并显示. 盛放图片的盒子模型如下: <div class="box"> <div class="box_img"> <img src="Img/8.jpg"> </div> </div> 设置img-width为150px,然后box_img添加内边距和阴影效果,box的外边距为0,添加内边距.盒子的宽度是由img-width和边

PHP+Jquery与ajax相结合实现下拉淡出瀑布流效果【无需插件】_php实例

导读: 瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.最早采用此布局的网站是Pinterest,逐渐在国内流行开来.国内大多数清新站基本为这类风格,像花瓣网.蘑菇街.美丽说等. 不废话,直接上代码,整段代码分为前后两段代码,具体代码如下所示. 前台: <?php <br>$category=$this->getMyVal('category',$_GET);<br>

JS仿淘宝详情页菜单条智能定位效果

类似于淘宝详情页菜单条智能定位 对于每个人来说并不陌生!如下截图所示:红色框的那部分!     列表页定位"> 基本原理:        是用JS侦听滚动事件,当页面的滚动距离(页面滚动的高度)大于或者等于 "对象"(要滚动的对象)距离页面顶部的高度,也就是说滚动的对象与窗口的上边缘接触时,立即将对象定位属性position值改成fixed(固定)(除IE6以外,因为IE6不支持fixed).对于IE6用绝对定位position:absolute,top:就是"

jquery代码实现简单的随机图片瀑布流效果

  jquery代码实现简单的随机图片瀑布流效果 瀑布流布局最近真的很流行,很多人都跟我一样想知道是怎么做出来的吧,经过网上搜索大量的参考结合N边的实验今天终于被我写出来了,这里分享给大家,有需要的小伙伴参考下吧. 为了便于大家理解我使用了jQuery.当然用源生js代码执行的效率会高一些,但是很多人多源生js不是很熟练 代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 3