我也来写一个瀑布流!!!

原创 追随 随笔 待整理 1400阅读 2014-08-23 23:45:43 举报

看到有好多人都在写瀑布流,我也来写一下瀑布流!
不过我没有别人写的那么具有封住性。
下面大家一起来看看我的代码。
瀑布流数据来源pingfan 的笔记 /article.php?mod=view&uid=13737&id=fd5112588e7d59a1cdc0dd42ea53e139
上代码!!!
代码片段 1

[code]<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0; padding: 0;}
body{background: #ccc;}
.div1{width: 1060px; margin: 0 auto;}
.div1 .title{text-align: center; line-height: 30px; font-size: 20px; padding: 20px 0;}
.div1 ul{width: 202px; margin: 0 5px; float: left; list-style: none;}

box ul li{width: 180px; padding: 10px; background: #fc0; margin-bottom: 10px;}

box ul li img{width: 100%;}

box ul li p{text-align: center; line-height: 24px; font-size: 14px;}

shadow {position:fixed; left:0; top:0; width:100%; height:100%; background:black; filter:alpha(opacity:30); opacity:0.3; z-index:1; display:none;}

loading{width: 1280px; height: 40px; position: fixed; bottom: 10px; left: 50%; margin-left: -640px; text-align: center; display: none; z-index: 2;}

</style>
<script type="text/javascript">
function json_url(json){
json.t = Math.random();

var arr = [];

for(var name in json){
    arr.push(name + '=' + json[name]);
}

return arr.join('&');

}

function ajax(json){
var timer = null;

json = json || {};

if(!json.url){
    alert('用法不符合规范,地址必须写!');
    return;
}

json.type = json.type || 'get';
json.data = json.data || {};
json.time = json.time || 5;
json.cbName = json.cbName || 'cb';

if(window.XMLHttpRequest){
    var oAjax = new XMLHttpRequest();
}else{
    var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
}

switch(json.type.toLowerCase()){
    case 'get':
        oAjax.open('GET', json.url+'?'+json_url(json.data), true);

        oAjax.send();

        oAjax.onreadystatechange = ajax_fn;
        break;
    case 'post':
        oAjax.open('POST', json.url, true);

        oAjax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

        oAjax.send(json_url(json.data));

        oAjax.onreadystatechange = ajax_fn;
        break;
    case 'jsonp':
        var fnName = 'my_jsonp'+Math.random();
        fnName = fnName.replace('.', '');
        window[fnName] = function (json_data){
            clearTimeout(timer);
            json.success && json.success(json_data);

            oHead.removeChild(oS);
        }

        json.data[json.cbName] = fnName;

        var oS = document.createElement('script');
        oS.src = json.url + '?' + json_url(json.data);
        var oHead = document.getElementsByTagName('head')[0];
        oHead.appendChild(oS);
        break;
}

json.loadingFn && json.loadingFn(); 

function ajax_fn(){
    if(oAjax.readyState == 4){
        if(oAjax.status >= 200 && oAjax.status < 300 || oAjax.status == 304){
            clearTimeout(timer);
            json.success && json.success(oAjax.responseText);
        }else{
            clearTimeout(timer);
            json.error && json.error(oAjax.status);
        }
    }
}

timer = setTimeout(function (){
    alert('网络超时');
    oAjax.onreadystatechange = null;
}, json.time*1000);

}

window.onload = function (){
var aUl = document.getElementById('box').getElementsByTagName('ul');
var oLoad = document.getElementById('loading');
var iPage = 1;

var bSign = true;

function getPage(n){
    oLoad.style.display = 'block';

    ajax({
        url: 'http://pingfan1990.sinaapp.com/javacript/wall/jsonpdata.php?name=pingfan',
        type: 'jsonp',
        data: { 
            page: n
        },
        cbName: 'callback',
        success: function (json){
            bSign = true;

            oLoad.style.display = 'none';

            if(json.length == 0){
                alert('已经到最后一页了!');
                return;
            }else{
                for(var i = 0; i < json.length; i++){
                    var oImg = new Image();

                    (function (index){
                        oImg.onload = function (){
                            var oLi = document.createElement('li');

                            oLi.innerHTML = '<img src="http://pingfan1990.sinaapp.com/javacript/wall/'+json[index].image+'" alt="'+json[index].alt+'"><p>'+json[index].title+'</p>';

                            oLi.children[0].style.height = 200 * this.height / this.width + 'px';

                            var arr = [];

                            for(var j = 0; j < aUl.length; j++){
                                arr[j] = aUl[j];
                            }

                            arr.sort(function (ul1, ul2){
                                return ul1.offsetHeight - ul2.offsetHeight;
                            });

                            arr[0].appendChild(oLi);
                        };
                    })(i);

                    oImg.src = 'http://pingfan1990.sinaapp.com/javacript/wall/' + json[i].image;
                }
            }
        }
    });
}

getPage(1);

window.onscroll = window.onresize = function (){
    var scrollT = document.documentElement.scrollTop || document.body.scrollTop;

    if(scrollT == document.body.scrollHeight - document.documentElement.clientHeight){
        if(bSign == false) return;

        bSign = false;

        iPage++;

        getPage(iPage);
    }
};

};
</script>
</head>
<body>
<div id="box" class="div1">
<p class="title">瀑布流</p>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
</div>
<p id="loading"><img src="http://pingfan1990.sinaapp.com/javacript/wall/images/loading.gif"></p>;
</body>
</html>[/code]

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复