程序博客网 > 计量经济学数据

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

来源：互联网 发布：计量经济学数据 编辑：程序博客网 时间：2024/05/18 02:20

转载地址: http://www.oschina.net/code/snippet_114440_10309


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

效果预览： http://www.seejs.com/waterfall/ 


[代码] [JavaScript]代码

001<!DOCTYPE html>
002<html>
003<head>
004    <meta charset="utf-8">
005    <title>Waterfall代码</title>
006</head>
007<body>
008<style type="text/css">
009.wf-main{
010    position: relative;
011    margin: 0 auto;
012    width: 990px;
013    overflow: hidden;
014}
015.wf-main .wf-cld{
016    position: absolute;
017    margin-bottom: 10px;
018    padding:5px 8px;
019    width: 214px;
020    left: -9999px;
021    top: -9999px;
022    line-height:18px;
023    border: 1px solid#999;
024    border-radius: 4px;
025    background-color:#ccc;
026    overflow: hidden;
027}
028.wf-cld .inner{
029    position: absolute;
030    left: -9999px;
031    top: -9999px;
032    margin-bottom: 5px;
033    width: 73px;
034    overflow: hidden;
035    border: 1px solid#f00;
036    border-radius: 3px;
037}
038.wf-cld .title{
039    margin: 0 0 5px;
040    padding: 5px;
041    width: 63px;
042    color:#f00;
043    font-size: 14px;
044}
045</style>
046<div class="wf-main"id="wf-main">
047    <div class="wf-cld"><h2 style="color:#f50">1、瀑布流</h2></div>
048    <div class="wf-cld">2<br>2</div>
049    <div class="wf-cld">3<br>4<br>4</div>
050    <div class="wf-cld">4<br>4<br>4<br>4</div>
051    <div class="wf-cld">5<br>4<br>4<br>4<br>4</div>
052    <div class="wf-cld">6<br>4<br>4<br>4<br>4<br>4</div>
053    <div class="wf-cld">7<br>4<br>4<br>4<br>4<br>4<br>4</div>
054    <div class="wf-cld">8<br>4<br>4<br>4<br>4<br>4<br>4<br>4</div>
055    <div class="wf-cld">9<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4</div>
056    <div class="wf-cld">10<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4</div>
057    <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>
058    <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>
059    <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>
060    <div class="wf-cld"id="wf-inner">
061        <h2 class="inner title">21、内部瀑布流</h2>
062        <div class="inner">21-1<br>1</div>
063        <div class="inner">21-2</div>
064        <div class="inner">21-3</div>
065        <div class="inner">21-4</div>
066        <div class="inner">21-5<br></div>
067        <div class="inner">21-6</div>
068        <div class="inner">21-7</div>
069        <div class="inner">21-8</div>
070        <div class="inner">21-9</div>
071    </div>
072    <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>
073    <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>
074    <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>
075    <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>
076    <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>
077    <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>
078    <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>
079    <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>
080    <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>
081    <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>
082</div>
083<script type="text/javascript">
084function Waterfall(param){
085    this.id =typeof param.container =='string' ? document.getElementById(param.container) : param.container;
086    this.colWidth = param.colWidth;
087    this.colCount = param.colCount || 4;
088    this.cls = param.cls && param.cls !='' ? param.cls : 'wf-cld';
089    this.init();
090}
091Waterfall.prototype = {
092    getByClass:function(cls,p){
093        vararr = [],reg = new RegExp("(^|\\s+)" + cls + "(\\s+|$)","g");
094        varnodes = p.getElementsByTagName("*"),len = nodes.length;
095        for(vari = 0; i < len; i++){
096            if(reg.test(nodes[i].className)){
097                arr.push(nodes[i]);
098                reg.lastIndex = 0;
099            }
100        }
101        returnarr;
102    },
103    maxArr:function(arr){
104        varlen = arr.length,temp = arr[0];
105        for(varii= 1; ii < len; ii++){
106            if(temp < arr[ii]){
107                temp = arr[ii];
108            }
109        }
110        returntemp;
111    },
112    getMar:function(node){
113        vardis = 0;
114        if(node.currentStyle){
115            dis = parseInt(node.currentStyle.marginBottom);
116        }elseif(document.defaultView){
117            dis = parseInt(document.defaultView.getComputedStyle(node,null).marginBottom);
118        }
119        returndis;
120    },
121    getMinCol:function(arr){
122        varca = arr,cl = ca.length,temp = ca[0],minc = 0;
123        for(varci = 0; ci < cl; ci++){
124            if(temp > ca[ci]){
125                temp = ca[ci];
126                minc = ci;
127            }
128        }
129        returnminc;
130    },
131    init:function(){
132        var_this = this;
133        varcol = [],//列高
134            iArr = [];//索引
135        varnodes = _this.getByClass(_this.cls,_this.id),len = nodes.length;
136        for(vari = 0; i < _this.colCount; i++){
137            col[i] = 0;
138        }
139        for(vari = 0; i < len; i++){
140            nodes[i].h = nodes[i].offsetHeight + _this.getMar(nodes[i]);
141            iArr[i] = i;
142        }
143         
144        for(vari = 0; i < len; i++){
145            varming = _this.getMinCol(col);
146            nodes[i].style.left = ming * _this.colWidth +"px";
147            nodes[i].style.top = col[ming] +"px";
148            col[ming] += nodes[i].h;
149        }
150         
151        _this.id.style.height = _this.maxArr(col) +"px";
152    }
153};
154new Waterfall({
155    "container":"wf-inner",
156    "colWidth":77,
157    "colCount":3,
158    "cls":"inner"
159});
160new Waterfall({
161    "container":"wf-main",
162    "colWidth":244,
163    "colCount":4
164});
165</script>
166</body>
167</html>

[图片] 瀑布流.jpg



计量经济学数据 计量经济学数据
原创粉丝点击
热门IT博客
windows无法访问u盘windows无法访问u盘
圆明园知乎圆明园知乎
rust好玩知乎
python画玫瑰花 代码
如果发声是危险的知乎
北风网大数据视频下载
淘宝乔戈里快速服务
高职教育大数据的特征
上海英方软件福利待遇
在线看电视软件
linux创建目录
集群智能算法
nativeshare.js调用
php 获取网站根目录
卫星电视直播软件app
网络打印机文档挂起
橘子郡美妆淘宝店扒皮
网络兼职都干什么
maven 源码
淘宝金融贷款是真的吗
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 神酒曲 星宇酒曲 酒曲馒头 红酒杯 酒杯图片 红酒杯拿法 红酒杯图片 大酒杯 八酒杯 酒杯玫瑰 红酒杯品牌 酒杯简笔画 节日酒杯 酒杯品牌 酒杯分类 酒杯的图片 图片酒杯 酒杯怎么拿 酒杯图 大酒杯图片 怎么拿酒杯 拿酒杯图片 陶瓷酒杯 小酒杯图片 古代酒杯 玻璃小酒杯 酒杯照片 高档酒杯 酒杯生产商 红酒酒杯 白酒酒杯 酒杯定制 酒杯湾 小酒杯批发 仿古酒杯 三钱小酒杯 酒杯犬 青花酒杯 酒壶酒杯 酒杯素描 10ml酒杯

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里