JQ_简单瀑布流

/*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;width: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>

转载于:https://www.cnblogs.com/somesayss/archive/2012/07/25/2609069.html