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

前端技术 2023/08/08 JavaScript

自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   

本文地址：https://www.stayed.cn/item/560

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案