面向对象版--瀑布流

原创 追随 随笔 待整理 3282阅读 2014-08-24 00:24:09 举报

在之前的版本上做了小小的修改,上代码!
代码片段 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;}
.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;}
.div1 ul li{width: 180px; padding: 10px; background: #fc0; margin-bottom: 10px;}
.div1 ul li img{width: 100%;}
.div1 ul li p{text-align: center; line-height: 24px; font-size: 14px;}

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 Flow(opts){
this.obj = document.getElementById(opts.ele);
this.load = document.getElementById(opts.load);

if(!this.obj){
    return false;
}else{
    this.init();
}   

}

Flow.prototype.init = function (){
for(var i = 0; i < 5; i++){
var oUl = document.createElement('ul');

    this.obj.appendChild(oUl);
}

this.aUl = this.obj.children;
this.iPage = 1;
this.bSign = true;

this.getPage(1);

this.resize();

};

Flow.prototype.getPage = function (n){
var _this = this;

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

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

                (function (index){
                    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 < _this.aUl.length; j++){
                        arr[j] = _this.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;
            }
        }
    }
});

};

Flow.prototype.resize = function (){
var _this = this;

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

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

        _this.bSign = false;

        _this.iPage++;

        _this.getPage(_this.iPage);
    }
};

};

Flow.prototype.ajax = function (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 + '?' + this.jsonUrl(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);

};

Flow.prototype.jsonUrl = function (json){
json.t = Math.random();

var arr = [];

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

return arr.join('&');

};

function flow(opts){
return new Flow(opts);
}

window.onload = function (){
flow({
ele: 'box',
load: 'loading'
});
};
</script>
</head>
<body>
<p class="title">瀑布流</p>
<div id="box" class="div1"></div>
<p id="loading"><img src="http://pingfan1990.sinaapp.com/javacript/wall/images/loading.gif"></p>;
</body>
</html>[/code]

评论 ( 22 )
最新评论
追随 20F 2014-09-01 18:34:23 22F

额...不难的,写两遍就会了

小水晶 20F 2014-09-01 16:33:16 21F

逻辑性强了点,脑子有点转不过来

追随 16F 2014-09-01 14:35:35 20F

找最小高度的,会往里面插入,因为只有数组才能排序,所以代码里面有一个arr数组,把内容都添加到数组里面去,然后通过数组的sort来排序

小水晶 16F 2014-09-01 10:41:48 19F

假如瀑布流有6列,这6列的高存在一个数组里,第7张图片就放在这个数组中最小的高度的这张图片的下面,那第8张放哪里啊,问这个问题是想知道从第二行开始,图片是怎么排列的

小水晶 16F 2014-09-01 09:36:32 18F

前端啊,刚入行

追随 16F 2014-08-29 10:15:49 17F

   那你是做什么的呀

小水晶 14F 2014-08-29 09:12:45 16F

没学过js呢,一句都不懂

追随 14F 2014-08-28 15:20:15 15F

   很简单哇,不要晕,哪句不懂,我给你解释

小水晶 11F 2014-08-28 14:03:03 14F

代码这么多,还没看,就已经晕了

追随 11F 2014-08-27 20:34:03 13F

  

追随 6F 2014-08-27 20:33:47 12F

   我不流弊啊

yuxiaoming 6F 2014-08-27 13:48:47 11F

mark

可怜兮兮 6F 2014-08-26 20:11:58 10F

嗯嗯 我也是 只是没你那么牛逼  

追随 6F 2014-08-26 19:04:42 9F

   正是,学到就是自己的

可怜兮兮 6F 2014-08-26 14:04:57 8F

智  能  ---社的?

追随 6F 2014-08-25 12:54:47 7F

这个是可以做到的,只是懒得写而已,因为我这个是固定的宽度的。
瀑布流是有两张写法的,一种就是我这样的,还有一种就是用浮动来做,宽度是根据屏幕来自适应的,类似百度图片。

mengchen129 2F 2014-08-25 09:33:14 6F

楼主能否做到,当改变浏览器宽度时,瀑布流能自适应发生变化呢?

追随 2F 2014-08-25 00:13:19 5F

   我这只是做个demo而已啦,不是抢你资源...

pingfan 2F 2014-08-24 20:30:33 4F

暂时可以让你用一下,我的站也会调整的,而且你引用会产生的流量,扣我的豆豆 ,你以后还是想办法迁移

追随 2F 2014-08-24 19:18:17 3F

   没有资源啊...借用一下都不行嘛