原生JS实现的简单“瀑布流”布局

太过爱你忘了你带给我的痛 2022-07-30 14:55 278阅读 0赞

自pinterest网站爆红以来，国内一度掀起“仿PIN”狂潮，诸如花瓣、蘑菇街等等。正是如此，“瀑布流”式布局受到广大网民的青睐。众多知名JS库，也相继出现“瀑布流”布局插件，譬如jQuery的Masonry插件、KISSY的waterfall插件等。今天闲来无聊，我也自己动手弄了段原生JS代码，实现了简单的“瀑布流”布局效果，当然肯定不能和以上那些优秀插件相提并论，有兴趣的朋友，可以去看看，希望能带给你或多或少的收获。

效果预览： [http://www.seejs.com/demos/waterfall/][http_www.seejs.com_demos_waterfall]

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Waterfall代码</title>
    </head>
    <body>
    <style type="text/css">
    .wf-main{
        position: relative;
        margin: 0 auto;
        width: 990px;
        overflow: hidden;
    }
    .wf-main .wf-cld{
        position: absolute;
        margin-bottom: 10px;
        padding:5px 8px;
        width: 214px;
        left: -9999px;
        top: -9999px;
        line-height:18px;
        border: 1px solid #999;
        border-radius: 4px;
        background-color: #ccc;
        overflow: hidden;
    }
    .wf-cld .inner{
        position: absolute;
        left: -9999px;
        top: -9999px;
        margin-bottom: 5px;
        width: 73px;
        overflow: hidden;
        border: 1px solid #f00;
        border-radius: 3px;
    }
    .wf-cld .title{
        margin: 0 0 5px;
        padding: 5px;
        width: 63px;
        color: #f00;
        font-size: 14px;
    }
    </style>
    <div class="wf-main" id="wf-main">
        <div class="wf-cld"><h2 style="color:#f50">1、瀑布流</h2></div>
        <div class="wf-cld">2<br>2</div>
        <div class="wf-cld">3<br>4<br>4</div>
        <div class="wf-cld">4<br>4<br>4<br>4</div>
        <div class="wf-cld">5<br>4<br>4<br>4<br>4</div>
        <div class="wf-cld">6<br>4<br>4<br>4<br>4<br>4</div>
        <div class="wf-cld">7<br>4<br>4<br>4<br>4<br>4<br>4</div>
        <div class="wf-cld">8<br>4<br>4<br>4<br>4<br>4<br>4<br>4</div>
        <div class="wf-cld">9<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4</div>
        <div class="wf-cld">10<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4</div>
        <div class="wf-cld">18<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4</div>
        <div class="wf-cld">19<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4</div>
        <div class="wf-cld">20<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4</div>
        <div class="wf-cld" id="wf-inner">
            <h2 class="inner title">21、内部瀑布流</h2>
            <div class="inner">21-1<br>1</div>
            <div class="inner">21-2</div>
            <div class="inner">21-3</div>
            <div class="inner">21-4</div>
            <div class="inner">21-5<br></div>
            <div class="inner">21-6</div>
            <div class="inner">21-7</div>
            <div class="inner">21-8</div>
            <div class="inner">21-9</div>
        </div>
        <div class="wf-cld">22<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4</div>
        <div class="wf-cld">23<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4</div>
        <div class="wf-cld">24<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4</div>
        <div class="wf-cld">11<br>2<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4</div>
        <div class="wf-cld">12<br>2<br>2<br>3<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4</div>
        <div class="wf-cld">13<br>4<br>4<br>3<br>3<br>1<br>2<br>4<br>4<br>4<br>4<br>4<br>4</div>
        <div class="wf-cld">14<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4</div>
        <div class="wf-cld">15<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4</div>
        <div class="wf-cld">16<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4</div>
        <div class="wf-cld">17<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4</div>
    </div>
    <script type="text/javascript">
    function Waterfall(param){
        this.id = typeof param.container == 'string' ? document.getElementById(param.container) : param.container;
        this.colWidth = param.colWidth;
        this.colCount = param.colCount || 4;
        this.cls = param.cls && param.cls != '' ? param.cls : 'wf-cld';
        this.init();
    }
    Waterfall.prototype = {
        getByClass:function(cls,p){
            var arr = [],reg = new RegExp("(^|\\s+)" + cls + "(\\s+|$)","g");
            var nodes = p.getElementsByTagName("*"),len = nodes.length;
            for(var i = 0; i < len; i++){
                if(reg.test(nodes[i].className)){
                    arr.push(nodes[i]);
                    reg.lastIndex = 0;
                }
            }
            return arr;
        },
        maxArr:function(arr){
            var len = arr.length,temp = arr[0];
            for(var ii= 1; ii < len; ii++){
                if(temp < arr[ii]){
                    temp = arr[ii];
                }
            }
            return temp;
        },
        getMar:function(node){
            var dis = 0;
            if(node.currentStyle){
                dis = parseInt(node.currentStyle.marginBottom);
            }else if(document.defaultView){
                dis = parseInt(document.defaultView.getComputedStyle(node,null).marginBottom);
            }
            return dis;
        },
        getMinCol:function(arr){
            var ca = arr,cl = ca.length,temp = ca[0],minc = 0;
            for(var ci = 0; ci < cl; ci++){
                if(temp > ca[ci]){
                    temp = ca[ci];
                    minc = ci;
                }
            }
            return minc;
        },
        init:function(){
            var _this = this;
            var col = [],//列高
                iArr = [];//索引
            var nodes = _this.getByClass(_this.cls,_this.id),len = nodes.length;
            for(var i = 0; i < _this.colCount; i++){
                col[i] = 0;
            }
            for(var i = 0; i < len; i++){
                nodes[i].h = nodes[i].offsetHeight + _this.getMar(nodes[i]);
                iArr[i] = i;
            }
             
            for(var i = 0; i < len; i++){
                var ming = _this.getMinCol(col);
                nodes[i].style.left = ming * _this.colWidth + "px";
                nodes[i].style.top = col[ming] + "px";
                col[ming] += nodes[i].h;
            }
             
            _this.id.style.height = _this.maxArr(col) + "px";
        }
    };
    new Waterfall({
        "container":"wf-inner",
        "colWidth":77,
        "colCount":3,
        "cls":"inner"
    });
    new Waterfall({
        "container":"wf-main",
        "colWidth":244,
        "colCount":4
    });
    </script>
    </body>
    </html>

2.  \[图片\]  瀑布流.jpg

![29235509_vKtE.jpg][]

转载自：http://www.oschina.net/code/snippet\_114440\_10309

[http_www.seejs.com_demos_waterfall]: http://www.seejs.com/demos/examples/waterfall/index.html
[29235509_vKtE.jpg]: /images/20220724/3e8d4f32733444188492c93e200996c7.png