/*jq*/
var cascade_JQ = function(a){
this.option = a;
this.base();
this.resize();
}
cascade_JQ.prototype = {
base:function(){
this.begin();
},
begin:function(){
var main = $(this.option.box);
var mainli = main.find(this.option.node);
var blank = this.option.blank;
var index = this.index;
var num = (main.width()/(mainli.width()+blank));
var juli = ((main.width()%(mainli.width()+blank))+blank)/2;
num = parseInt(num);
for(var i=0; i<num; i++){
var y = (i*(mainli.width()+blank))+juli;
mainli.eq(i).css("left",y+"px");
mainli.eq(i).css("top",0);
}
var _arr = [];
for(var i=0; i<mainli.length; i++){
_arr.push(mainli.eq(i));
if(i<num)continue;
var _offset = _arr[0].offset().top+_arr[0].height()+blank;
var _minset = _arr[0];
var _maxset = _offset;
for(var k=0; k<num; k++){
if(k==0)continue;
var b = _arr[k].offset().top+_arr[k].height()+blank;
if(_offset>b){
_minset = _arr[k];
_offset = b;
}
if(_maxset<b){
_maxset = b;
}
}
var _left = _minset.position().left;
mainli.eq(i).css("left",_left);
mainli.eq(i).css("top",_offset);
var ind = index(_minset,_arr);
_arr.splice(ind,1);
}
main.css("height",_maxset)
},
resize:function(){
var begin = this.begin;
var _this = this;
if(!+"/v1" && !document.querySelector){
window.onresize = function(){
setTimeout(function(){
begin.call(_this)
},150)
}
}else{
window.onresize = function(){
begin.call(_this)
}
}
},
index:function(a,b){
for(var i in b){
if(a == b[i]){
return i;
}
}
}
}
new cascade_JQ({
box:"#main",
node:"li",
blank:5
});
/*css*/
.main{margin:0 auto;position:relative;zoom:1; background:#f00}
.main li{position:absolute;240px;background:#CCC;font:12px/22px "微软雅黑";}
/*html*/
<div class="main" id="main">
<ul>
<li>既然这样 那么只有我来拯救世界了~既然这样 那么只有我来拯救世界了~既然这样 那么只有我来拯救世界了~既然这样 那么只有我来拯救世界了~</li>
<li>生命中伟大的光辉不在于永不坠落，而是在坠落后能再度升起。
</li>
<li>十二星座偶尔冲动时会想干冲动时会什么？</li>
<li>十二星座偶尔冲动时会想干什么？白羊（不想活了）；金牛（独自旅行）；双子（想消失）；巨蟹（不想工作）；狮子（想骂人；处女（想抽人）；天秤（想喝几杯）；天蝎（想把所有钱花光）；射手（想大喊）；摩羯（抓住某个人猛亲）；水瓶（想回到过去）；双鱼（想私奔）</li>
<li>生命中伟大的光辉不在于永不坠落，而是在坠落后能再度升起。</li>
<li>生命中伟大的光辉不在于永不坠落，而是在坠落后能再度升起。</li>
<li>十二星座偶尔冲动时会想干什么？白羊（不想活了）；金牛（独自旅行）；双子（想消失）；巨蟹（不想工作）；狮子（想骂人；处女（想抽人）；天秤（想喝几杯）；天蝎（想把所有钱花光）；射手（想大喊）；摩羯（抓住某个人猛亲）；水瓶（想回到过去）；双鱼（想私奔）</li>
<li>生命中伟大的光辉不在于永不坠落，而是在坠落后能再度升起。</li>
<li>生命中伟大的光辉不在于永不坠落，而是在坠落后能再度升起。</li>
<li>十二星座偶尔冲动时会想干什么？白羊（不想活了）；金牛（独自旅行）；双子（想消失）；巨蟹（不想工作）；狮子（想骂人；处女（想抽人）；天秤（想喝几杯）；天蝎（想把所有钱花光）；射手（想大喊）；摩羯（抓住某个人猛亲）；水瓶（想回到过去）；双鱼（想私奔）十二星座偶尔冲动时会想干什么？白羊（不想活了）；金牛（独自旅行）；双子（想消失）；巨蟹（不想工作）；狮子（想骂人；处女（想抽人）；天秤（想喝几杯）；天蝎（想把所有钱花光）；射手（想大喊）；摩羯（抓住某个人猛亲）；水瓶（想回到过去）；双鱼（想私奔）</li>
<li>生命中伟大的光辉不在于永不坠落，而是在坠落后能再度升起。</li>
<li>生命中伟大的光辉不在于永不坠落，而是在坠落后能再度升起。</li>
<li>生命中伟大的光辉不在于永不坠落，而是在坠落后能再度升起。</li>
<li>生命中伟大的光辉不在于永不坠落，而是在坠落后能再度升起。</li>
<li>十二星座偶尔冲动时会想干什么？白羊（不想活了）；金牛（独自旅行）；双子（想消失）；巨蟹（不想工作）；狮子（想骂人；处女（想抽人）；天秤（想喝几杯）；天蝎（想把所有钱花光）；射手（想大喊）；摩羯（抓住某个人猛亲）；水瓶（想回到过去）；双鱼（想私奔）</li>
<li>生命中伟大的光辉不在于永不坠落，而是在坠落后能再度升起。</li>
<li>生命中伟大的光辉不在于永不坠落，而是在坠落后能再度升起。</li>
<li>十二星座偶尔冲动时会想干什么？白羊（不想活了）；金牛（独自旅行）；双子（想消失）；巨蟹（不想工作）；狮子（想骂人；处女（想抽人）；天秤（想喝几杯）；天蝎（想把所有钱花光）；射手（想大喊）；摩羯（抓住某个人猛亲）；水瓶（想回到过去）；双鱼（想私奔）十二星座偶尔冲动时会想干什么？白羊（不想活了）；金牛（独自旅行）；双子（想消失）；巨蟹（不想工作）；狮子（想骂人；处女（想抽人）；天秤（想喝几杯）；天蝎（想把所有钱花光）；射手（想大喊）；摩羯（抓住某个人猛亲）；水瓶（想回到过去）；双鱼（想私奔）</li>
<li>生命中伟大的光辉不在于永不坠落，而是在坠落后能再度升起。</li>
<li>生命中伟大的光辉不在于永不坠落，而是在坠落后能再度升起。</li>
</ul>
</div>