瀑布流Rewrite

原创 Ann大然 随笔 javascript 2380阅读 2014-08-22 20:25:02 举报

之前也写过一次瀑布流,这次是在学习了pingfan 的笔记后写的,pingfan 写的很好,他的笔记/article.php?mod=view&uid=13737&id=fd5112588e7d59a1cdc0dd42ea53e139

他得做法是利用jsonp跨域取值,也就是动态创建<script src="脚本">调用callback 函数,这点值得学习的,可以参考http://justcoding.iteye.com/blog/1366102

顺带贴一张跨域的总结:http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html很全面。

这次重写还注意了一点就是:每一次添加新图片之前要先判断一下哪一列最短,如果某列最短,加到最短的那一列。

代码片段 1

[code]
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>瀑布流new</title>
<style>
h1{color:#903}
body{background-color:#CCC}
.wrapper{margin:0px auto;width:1100px;text-align:center;}
.picwrapper{width:100%;padding:20px 0px 0px 20px;height:auto;min-height:100%;background-color:#CCC}
.picwrapper ul{list-style:none;margin:0;padding:0;}
.picwrapper li{float:left;width:250px;margin-right:20px;}
.itemwrapper{ box-shadow:0px 0px 3px #666;-webkit-box-shadow:0px 0px 3px #666;width:100%;overflow:hidden;margin:0px;padding:0px;margin:0px 20px 20px 0px;height:auto;}
.picwrapper li img{width:250px;}
.picwrapper .tip{width:100%;height:auto;background-color:white; text-align:left; text-indent:1em;padding:5px 10px;margin-top:-5px}
.loading{position:fixed;background:url(http://pingfan1990.sinaapp.com/javacript/wall/images/loading.gif) no-repeat center center;width:100%;height:50px;text-align:center;bottom:0px;display:none}
</style>
</head>
<body>
<div class="wrapper">
<h1>Waterflow</h1>
<div class="picwrapper">
<ul id="list">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<div class="loading" id="loading">
</div>
<script>
(function(global){
var $$ = function(id){
return document.getElementById(id);
};

        function jsonpImg(){
            this.url = "http://annweb.sinaapp.com/img/";
            this.list = $$("list").getElementsByTagName("li");
            this.loading = $$("loading");
            this.cur = 0;//下标指针
            this.loadNum = 8;//加载量
        }
        jsonpImg.prototype = {
            addImg/*添加新的图片*/:function(data,container){
                var div  = document.createElement("div"),
                    info = document.createElement("div"),
                    img = document.createElement("img");
                    div.className = "itemwrapper";
                    img.src =this.url + data.src;//图片
                    info.innerHTML=data.info;
                    console.log(info);
                    info.className = "tip";
                    div.appendChild(img);
                    div.appendChild(info);
                    container.appendChild(div);//一个图片单元添加到List里面
            },
            jsonpAjax:function(url,callback){
                var script = document.createElement("script");
                script.src = url+"?callback="+callback;
                document.getElementsByTagName("head")[0].appendChild(script);//添加到head中
            },
            appendData:function(data){
                var jsonData =eval("("+data+")");
                for(var i=0;i<this.loadNum;i++){
                    var min_index = this.getMinList();//最短的那一列
                    this.addImg(jsonData[i],this.list[min_index]);
                }   
            },
            getMinList/*返回高度最短的序列*/:function(){
                var arr=[];
                for(var i=0;i<this.list.length;i++){
                    arr[i] = this.list[i].offsetHeight;
                }
                arr.sort(function compare(a,b){
                    return a-b;
                });//升序排列
                for(var j=0;j<this.list.length;j++){
                    if(this.list[j].offsetHeight == arr[0]){
                        return j;
                    }
                }
            },
            getScrollTop:function(){
                return (document.body.scrollTop>0)?document.body.scrollTop:document.documentElement.scrollTop;//返回滚动距离
            }
        }

        global.$$ = $$;
        global.jsonpImg = jsonpImg;

    })(window);

    var jsonpInstance = new window.jsonpImg();
    window.onload = function(){
        jsonpInstance.jsonpAjax("http://annweb.sinaapp.com/pubuHandler.php","jsonpInstance.appendData");
    }
    window.onscroll = function(){
        if(document.documentElement.scrollHeight<=document.documentElement.clientHeight+jsonpInstance.getScrollTop()){//滚动条滚动到了底部
            jsonpInstance.loading.style.display = "block";//显示加载条
            //加载新的图片 利用jsonpAjax
            setTimeout(function(){
                jsonpInstance.loading.style.display = "none";//隐藏加载条
                jsonpInstance.jsonpAjax("http://annweb.sinaapp.com/pubuHandler.php","jsonpInstance.appendData");
            },1000);
        }else{
            jsonpInstance.loading.style.display = "none";
        }
    }
</script>

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

评论 ( 11 )
最新评论
Ann大然 10F 2014-08-27 19:52:25 11F

恩恩 有空试试

法克鱿 6F 2014-08-27 14:31:20 10F

能加上响应式的效果就完美啦

Ann大然 6F 2014-08-26 00:08:06 9F

就基础的php 太深得我也不会啦~~

追随 6F 2014-08-25 23:47:32 8F

这个图片的接口是你自己写的吗?
你还会写后台啊

Ann大然 6F 2014-08-25 14:56:45 7F

Go Go Go  

移花香 4F 2014-08-25 13:51:05 6F

一会我也写一个

追随 4F 2014-08-24 16:44:59 5F

我也是学习学习!

Ann大然 2014-08-24 13:32:46 4F

我来学习下

追随 2014-08-23 23:50:45 3F

   我也写了一个
http://www.w3cfuns.com/blog-5412579-5399936.html
不过没有你写的好

Ann大然 2014-08-23 09:38:22 2F

我跟你学的好咩!

pingfan 2014-08-23 06:42:12 1F

进步的节奏好快呀,赶不上你了……