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

最新推荐文章于 2021-03-18 00:00:14 发布

Hello 程序猿

最新推荐文章于 2021-03-18 00:00:14 发布

阅读量534

点赞数 1

分类专栏： Javascript 文章标签：布局瀑布流 javascript

Javascript 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

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

效果预览： 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

转载自：http://www.oschina.net/code/snippet_114440_10309

Hello 程序猿

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生JS实现的简单“瀑布流”布局

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

扫一扫

专栏目录