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

自pinterest网站爆红以来，国内一度掀起“仿PIN”狂潮，诸如花瓣、蘑菇街等等。正是如此，“瀑布流”式布局受到广大网民的青睐。众多老牌JS库，也相继出现“瀑布流”布局插件，譬如jQuery的Masonry插件、KISSY的waterfall插件等。

创新互联建站服务项目包括武冈网站建设、武冈网站制作、武冈网页制作以及武冈网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，武冈网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到武冈省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

今天闲来无聊，我也自己动手弄了段原生JS代码，实现了简单的“瀑布流”布局效果，当然肯定不能和以上那些优秀插件相提并论，有兴趣的朋友，可以去看看，希望能带给你或多或少的收获。

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

标签：<无>  
[代码] [JavaScript]代码

  
 
 
 
    
   
  
  
  
  1.    
    2. 
   
  
  
  
  2.     
    3. 
   
  
  
  
  3.     
    4. 
   
  
  
  
  4.         
    5. 
   
  
  
  
  5.      Waterfall代码   
    6. 
   
  
  
  
  6.     
    7. 
   
  
  
  
  7.     
    8. 
   
  
  
  
  8.     
    9. 
   
  
  
  
  9.  .wf-main{   
    10. 
   
  
  
  
  10.      position: relative;   
    11. 
   
  
  
  
  11.      margin: 0 auto;   
    12. 
   
  
  
  
  12.      width: 990px;   
    13. 
   
  
  
  
  13.      overflow: hidden;   
    14. 
   
  
  
  
  14.  }   
    15. 
   
  
  
  
  15.  .wf-main .wf-cld{   
    16. 
   
  
  
  
  16.      position: absolute;   
    17. 
   
  
  
  
  17.      margin-bottom: 10px;   
    18. 
   
  
  
  
  18.      padding:5px 8px;   
    19. 
   
  
  
  
  19.      width: 214px;   
    20. 
   
  
  
  
  20.      left: -9999px;   
    21. 
   
  
  
  
  21.      top: -9999px;   
    22. 
   
  
  
  
  22.      border: 1px solid #999;   
    23. 
   
  
  
  
  23.      border-radius: 4px;   
    24. 
   
  
  
  
  24.      background-color: #ccc;   
    25. 
   
  
  
  
  25.      overflow: hidden;   
    26. 
   
  
  
  
  26.  }   
    27. 
   
  
  
  
  27.  .wf-cld .inner{   
    28. 
   
  
  
  
  28.      position: absolute;   
    29. 
   
  
  
  
  29.      left: -9999px;   
    30. 
   
  
  
  
  30.      top: -9999px;   
    31. 
   
  
  
  
  31.      margin-bottom: 5px;   
    32. 
   
  
  
  
  32.      width: 73px;   
    33. 
   
  
  
  
  33.      overflow: hidden;   
    34. 
   
  
  
  
  34.      border: 1px solid #f00;   
    35. 
   
  
  
  
  35.      border-radius: 3px;   
    36. 
   
  
  
  
  36.  }   
    37. 
   
  
  
  
  37.  .wf-cld .title{   
    38. 
   
  
  
  
  38.      margin: 0 0 5px;   
    39. 
   
  
  
  
  39.      padding: 5px;   
    40. 
   
  
  
  
  40.      width: 63px;   
    41. 
   
  
  
  
  41.      color: #f00;   
    42. 
   
  
  
  
  42.      font-size: 14px;   
    43. 
   
  
  
  
  43.  }   
    44. 
   
  
  
  
  44.     
    45. 
   
  
  
  
  45.     
    46. 
   
  
  
  
  46.      1、瀑布流
  
  •      2
    2
    •   
  •      3
    4
    4
    •   
  •      4
    4
    4
    4  
  •      5
    4
    4
    4
    4  
  •      6
    4
    4
    4
    4
    4  
  •      7
    4
    4
    4
    4
    4
    4  
  •      8
    4
    4
    4
    4
    4
    4
    4  
  •      9
    4
    4
    4
    4
    4
    4
    4
    4  
  •      10
    4
    4
    4
    4
    4
    4
    4
    4
    4  
  •      18
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4  
  •      19
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4  
  •      20
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4  
  •        
  •          21、内部瀑布流  
  •          21-1
    1  
  •          21-2  
  •          21-3  
  •          21-4  
  •          21-5
      
  •          21-6  
  •          21-7  
  •          21-8  
  •          21-9  
  •        
  •      22
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4  
  •      23
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4  
  •      24
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4  
  •      11
    2
    4
    4
    4
    4
    4
    4
    4
    4
    4  
  •      12
    2
    2
    3
    4
    4
    4
    4
    4
    4
    4
    4  
  •      13
    4
    4
    3
    3
    1
    2
    4
    4
    4
    4
    4
    4  
  •      14
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4  
  •      15
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4  
  •      16
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4  
  •      17
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4
    4  
  •    
  •    
  •  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  
  •  });  
  •    
  •    
  •   

  • 文章题目：原生JS实现的简单“瀑布流”布局
    分享路径：http://www.shufengxianlan.com/qtweb/news32/509632.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    用户体验知识

    分类信息网

    成都网站优化　　 　小谭建站　　 　德信企业管理　　 　成都广告制作　　 　重庆电信五里店机房　　 　免备案虚拟主机　　 　网站SEO优化　　 　成都成品网站　　 　绵阳电信机房　　 　成都h5网站建设　　 　温江服务器托管　　 　成都做网站　　 　成都移动服务器托管　　 　微信公众号开发　　 　LOGO设计　　 　app开发　　 　兴发搬家　　 　蜜朵婚庆　　 　乐山企业网站设计　　 　达州博佩科技