原生JS实现美图瀑布流布局赏析

2019-11-20 11:36:04

字体：大中小

来源：转载

供稿：网友

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

1. js代码：

<!DOCTYPE html><html><head>  <meta charset="utf-">  <title>Waterfall代码</title></head><body><style type="text/css">.wf-main{  position: relative;  margin: auto;  width: px;  overflow: hidden;}.wf-main .wf-cld{  position: absolute;  margin-bottom: px;  padding:px px;  width: px;  left: -px;  top: -px;  line-height:px;  border: px solid #;  border-radius: px;  background-color: #ccc;  overflow: hidden;}.wf-cld .inner{  position: absolute;  left: -px;  top: -px;  margin-bottom: px;  width: px;  overflow: hidden;  border: px solid #f;  border-radius: px;}.wf-cld .title{  margin:  px;  padding: px;  width: px;  color: #f;  font-size: px;}</style><div class="wf-main" id="wf-main">  <div class="wf-cld"><h style="color:#f">、瀑布流</h></div>  <div class="wf-cld"><br></div>  <div class="wf-cld"><br><br></div>  <div class="wf-cld"><br><br><br></div>  <div class="wf-cld"><br><br><br><br></div>  <div class="wf-cld"><br><br><br><br><br></div>  <div class="wf-cld"><br><br><br><br><br><br></div>  <div class="wf-cld"><br><br><br><br><br><br><br></div>  <div class="wf-cld"><br><br><br><br><br><br><br><br></div>  <div class="wf-cld"><br><br><br><br><br><br><br><br><br></div>  <div class="wf-cld"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div>  <div class="wf-cld"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div>  <div class="wf-cld"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div>  <div class="wf-cld" id="wf-inner">    <h class="inner title">、内部瀑布流</h>    <div class="inner">-<br></div>    <div class="inner">-</div>    <div class="inner">-</div>    <div class="inner">-</div>    <div class="inner">-<br></div>    <div class="inner">-</div>    <div class="inner">-</div>    <div class="inner">-</div>    <div class="inner">-</div>  </div>  <div class="wf-cld"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div>  <div class="wf-cld"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div>  <div class="wf-cld"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div>  <div class="wf-cld"><br><br><br><br><br><br><br><br><br><br></div>  <div class="wf-cld"><br><br><br><br><br><br><br><br><br><br><br></div>  <div class="wf-cld"><br><br><br><br><br><br><br><br><br><br><br><br></div>  <div class="wf-cld"><br><br><br><br><br><br><br><br><br><br><br><br><br></div>  <div class="wf-cld"><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div>  <div class="wf-cld"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div>  <div class="wf-cld"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></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 || ;  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 = ; i < len; i++){      if(reg.test(nodes[i].className)){        arr.push(nodes[i]);        reg.lastIndex = ;      }    }    return arr;  },  maxArr:function(arr){    var len = arr.length,temp = arr[];    for(var ii= ; ii < len; ii++){      if(temp < arr[ii]){        temp = arr[ii];      }    }    return temp;  },  getMar:function(node){    var dis = ;    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[],minc = ;    for(var ci = ; 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 = ; i < _this.colCount; i++){      col[i] = ;    }    for(var i = ; i < len; i++){      nodes[i].h = nodes[i].offsetHeight + _this.getMar(nodes[i]);      iArr[i] = i;    }    for(var i = ; 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":,  "colCount":,  "cls":"inner"});new Waterfall({  "container":"wf-main",  "colWidth":,  "colCount":});</script></body></html>

2. [图片] 瀑布流.jpg