suchen

Heim >Web-Frontend >js-Tutorial >Native JS-Implementierung des Wasserfall-Flow-Layouts, Wertschätzung schöner Bilder_Javascript-Fähigkeiten

Native JS-Implementierung des Wasserfall-Flow-Layouts, Wertschätzung schöner Bilder_Javascript-Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 15:40:121798Durchsuche

自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' &#63; document.getElementById(param.container) : param.container;
  this.colWidth = param.colWidth;
  this.colCount = param.colCount || ;
  this.cls = param.cls && param.cls != '' &#63; 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   

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：JQuery-Diashow-Bildwechseleffektcode Sharing_JQueryNächster Artikel：JQuery-Diashow-Bildwechseleffektcode Sharing_JQuery

In Verbindung stehende Artikel

Mehr sehen