跨域取值瀑布流

原创 pingfan 随笔 js 4961阅读 2014-08-11 14:55:34 举报

现在瀑布流这种特效,越来越常见了,我也练了一下手:
分析瀑布流疑难问题:
1.其实主要是通过ajax,取值,然后添加到节点
2.判断滚动条滚动到底部,ajax就行了

完美兼容ie6,7,8
预览展示:
代码片段 1

代码展示:(带注释哦)
[code]<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>瀑布流</title>
<style type="text/css">
body,ul,li,p,img{margin:0}
body{background:#E0E0E0}
.title{text-align:center;color:#A73F0E;}
ul{padding:0;list-style:none;margin:0 auto;width:1060px;}
li{
float:left;
width:200px;
margin:5px;
}
li p{
padding:5px 2px;
text-indent:24px;
line-height:20px;
color:#646060;
}
.clearfix:after{
content:'';
display:block;
clear:both;
height:0;
visibility:hidden;
}
.imgmain{
border:1px solid #ddd;
-webkit-box-shadow:0 3px 6px rgba(0,0,0,.2);
-moz-box-shadow:0 3px 6px rgba(0,0,0,.2);
box-shadow:0 0px 8px rgba(0,0,0,.1);
background:#fff;
margin-bottom:20px;
}

loading{

        background:url(http://pingfan1990.sinaapp.com/javacript/wall/images/loading.gif) no-repeat center center;
        height:50px;
        width:100%;
        position:fixed;
        bottom:0;
        display:none;
        text-align:center;
    }
</style>

</head>
<body>
<h1 class='title'>瀑布流</h1>
<ul id='watermain' class='clearfix'>
<li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>
</ul>

<div id="loading">

</div>
<script type="text/javascript">
(function(window,undefined){

    var $$=function (id){
            return (!id) ? null :document.getElementById(id);
        };

    //jsonpImg构造函数
    function jsonpImg(){
        this.list=$$('watermain').children,
        this.maxlength=2,
        this.Numb=10,
        this.loading=$$('loading');
    }

    //jsonpImg原型
    jsonpImg.prototype={
        addImg:function(obj,url){
            var div=document.createElement('div'),
                img=document.createElement('img'),
                p=document.createElement('p'),
                text=document.createTextNode(obj.title);
                img.src=url+obj.image,
                div.className='imgmain';
                img.alt=obj.alt;
                p.appendChild(text),
                div.appendChild(img),
                div.appendChild(p);
                return div;                         
        },

        appendData:function(data){              
            var list=this.list,
                maxlength=this.maxlength,
                addImg=this.addImg,
                loading=this.loading;

            //参数用json,则不用new function进行序列化转换
            var json=data;
            //var json=new Function('return'+data)();
                loading.style.display='none';
                /*
                for(var i=0;i<maxlength*5;){
                    list[0].appendChild(addImg(json[i],'http://pingfan1990.sinaapp.com/javacript/wall/')),
                    list[1].appendChild(addImg(json[i+1],'http://pingfan1990.sinaapp.com/javacript/wall/')),
                    list[2].appendChild(addImg(json[i+2],'http://pingfan1990.sinaapp.com/javacript/wall/')),
                    list[3].appendChild(addImg(json[i+3],'http://pingfan1990.sinaapp.com/javacript/wall/')),
                    list[4].appendChild(addImg(json[i+4],'http://pingfan1990.sinaapp.com/javacript/wall/')),
                    i=i+5;
                }*/

                for(var i=0,len=this.Numb;i<len;i++){                
                    //获取最短的那一列
                    var minIndex=this.getMinList(list);
                    list[minIndex].appendChild(addImg(json[i],'http://pingfan1990.sinaapp.com/javacript/wall/'));

                }
            if(data==false)loading.innerHTML='没有数据了';

        },
        getMinList:function(list){
            var arr=[],list=$$('watermain').children;   
            for(var i=0;i<list.length;i++){
                arr[i]=list[i].clientHeight;
            }
            //升序排列
            arr.sort(function compare(a,b){
                return a-b;
            });
            for(var j=0;j<list.length;j++){
                if(list[j].clientHeight==arr[0]){
                    return j;
                }
            }
        },              
        datajsonp:function(url,callback){
            var script=document.createElement('script');
            script.type='text/javascript',
            script.src=url+callback;
            //script.src = 'http://localhost/mob/server.php?name=pingfan&callback='+callback;   
            document.getElementsByTagName('head')[0].appendChild(script);

            // 不能删除添加的script jsonp ,会引起ie7,ie8报错,无法显示数据,因此做兼容
            if(typeof document.attachEvent == 'undefined'){
                document.getElementsByTagName('head')[0].removeChild(script);
            }
        }

    }

    window.$$=$$;
    window.jsonpImg=jsonpImg;
})(window)

    var load=new jsonpImg();

    //不要用变量去转对象的方法,可能会引起this的问题
    //var   appendimg=load.appendData;
    window.onload=function(){
        load.datajsonp('http://pingfan1990.sinaapp.com/javacript/wall/jsonpdata.php?name=pingfan&callback=','load.appendData');

    }   

    //触发事件
    window.onscroll=function(){
        var scrolltop=document.documentElement.scrollTop || document.body.scrollTop,
            clientheight=document.documentElement.clientHeight,
            height=document.documentElement.scrollHeight;                   
        if(scrolltop+clientheight>=height){
            load.loading.style.display='block';
            setTimeout(function(){
                load.datajsonp('http://pingfan1990.sinaapp.com/javacript/wall/jsonpdata.php?name=pingfan&callback=','load.appendData');
            },500)

        }

    }

</script>

</body>
</html>[/code]

资料参考:http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html(跨域讲得很详细)

评论 ( 15 )
最新评论
pingfan 14F 2014-08-23 07:48:18 15F

已改呀

Ann大然 9F 2014-08-22 18:10:04 14F

追随同学说的有道理~你只要加个判断那一列是最短的,先把图片加在那一列就好

冬眠 9F 2014-08-22 15:30:27 13F

的确有bug

风中小萌 9F 2014-08-21 22:01:36 12F

膜拜

Ann大然 9F 2014-08-21 09:34:40 11F

明白了

pingfan 9F 2014-08-20 23:29:01 10F

这个是学习jquery模式的,主要是使得window由全局变量变成闭包里面的局部变量,当闭包里面执行是不需要将作用域回退到顶层作用域,这样可以更快的访问window,再就是传入window,可以压缩代码变成 (function(a,b){}(a)}等

Ann大然 6F 2014-08-20 22:56:10 9F

代码写得非常好 学习了!我一直不明白的是为什么要把window作为参数传进去?我直接(function(){......})()里面用window 应该也可以的吧

zd1010150 6F 2014-08-20 14:54:08 8F

mark

追随 6F 2014-08-13 20:05:14 7F

你去看看真正的瀑布流...要是图片的高度都规定好了,那还叫瀑布流吗...去看花瓣网的...

pingfan 5F 2014-08-13 12:17:08 6F

你没看到图片的尺寸有很大差异吗,有的很长,有的很短,必然会出现这样的问题,如果我规定图片的高度,那就会齐平

追随 4F 2014-08-13 11:53:48 5F

不能发图片啊...往下拉以后,有的栏会空出很多,大片的百块...你可以看看百度或者花瓣的,他们的瀑布流就没有这样的bug

pingfan 3F 2014-08-13 10:22:23 4F

有什么bug

追随 2014-08-13 10:00:42 3F

bug真严重...

gaofei019 2014-08-12 08:45:54 2F

  

pingfan 2014-08-11 21:51:33 1F

现在可以看到图片了,之前调整空间,导致看不到影响效果