原生JS實現的簡單“瀑布流”布局
作者：Mr.Zheng
自己動手弄了段原生JS代碼，實現了簡單的“瀑布流”布局效果，當然肯定不能和以上那些優秀插件相提并論，有興趣的朋友，可以去看看，希望能帶給你或多或少的收獲。
自pinterest網站爆紅以來，國內一度掀起“仿PIN”狂潮，諸如花瓣、蘑菇街等等。正是如此，“瀑布流”式布局受到廣大網民的青睞。眾多知名JS庫，也相繼出現“瀑布流”布局插件，譬如jQuery的Masonry插件、KISSY的waterfall插件等。
今天閑來無聊，我也自己動手弄了段原生JS代碼，實現了簡單的“瀑布流”布局效果，當然肯定不能和以上那些優秀插件相提并論，有興趣的朋友，可以去看看，希望能帶給你或多或少的收獲。
效果預覽： http://www.seejs.com/waterfall/
標簽： <無>
[代碼] [JavaScript]代碼
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>Waterfall代碼</title>
- </head>
- <body>
- <style type="text/css">
- .wf-main{
- position: relative;
- margin: 0 auto;
- width: 990px;
- overflow: hidden;
- }
- .wf-main .wf-cld{
- position: absolute;
- margin-bottom: 10px;
- padding:5px 8px;
- width: 214px;
- left: -9999px;
- top: -9999px;
- border: 1px solid #999;
- border-radius: 4px;
- background-color: #ccc;
- overflow: hidden;
- }
- .wf-cld .inner{
- position: absolute;
- left: -9999px;
- top: -9999px;
- margin-bottom: 5px;
- width: 73px;
- overflow: hidden;
- border: 1px solid #f00;
- border-radius: 3px;
- }
- .wf-cld .title{
- margin: 0 0 5px;
- padding: 5px;
- width: 63px;
- color: #f00;
- font-size: 14px;
- }
- </style>
- <div class="wf-main" id="wf-main">
- <div class="wf-cld"><h2 style="color:#f50">1、瀑布流</h2></div>
- <div class="wf-cld">2<br>2</div>
- <div class="wf-cld">3<br>4<br>4</div>
- <div class="wf-cld">4<br>4<br>4<br>4</div>
- <div class="wf-cld">5<br>4<br>4<br>4<br>4</div>
- <div class="wf-cld">6<br>4<br>4<br>4<br>4<br>4</div>
- <div class="wf-cld">7<br>4<br>4<br>4<br>4<br>4<br>4</div>
- <div class="wf-cld">8<br>4<br>4<br>4<br>4<br>4<br>4<br>4</div>
- <div class="wf-cld">9<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4</div>
- <div class="wf-cld">10<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4</div>
- <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>
- <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>
- <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>
- <div class="wf-cld" id="wf-inner">
- <h2 class="inner title">21、內部瀑布流</h2>
- <div class="inner">21-1<br>1</div>
- <div class="inner">21-2</div>
- <div class="inner">21-3</div>
- <div class="inner">21-4</div>
- <div class="inner">21-5<br></div>
- <div class="inner">21-6</div>
- <div class="inner">21-7</div>
- <div class="inner">21-8</div>
- <div class="inner">21-9</div>
- </div>
- <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>
- <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>
- <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>
- <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>
- <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>
- <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>
- <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>
- <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>
- <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>
- <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>
- </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 || 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
- });
- </script>
- </body>
- </html>
[圖片] 瀑布流.jpg
【編輯推薦】
責任編輯：張偉
來源：
開源中國社區
