js瀑布流 原理實現揭祕 javascript 原生實現

　　web，js瀑布流揭祕

　　瀑布流再好久以前流行，可能如我同樣入行晚的 ，可能就沒有機會去使用。可是這個技術終究是個挺炫酷的東西，花了一個上午來研究，用原生js實現了一個，下面會附上源碼，供你們解讀。

　　提及瀑布流，其實實現原理特別簡單，並且方法有不少，如今說一個大衆的方法，所謂瀑布流就是 一堆樣式差很少的 盒子排列在一塊兒，排列規則是，插入到高度最低的那一列，因此，實現起來就很簡單了，佈局分 塊，頁面分列，計算每一列的高度，而後把塊插入到列高度低的那一列，設置定位，left和top值就行了。

　　1.從佈局開始，基本佈局以下：

<div id="main">

　　<div class="box"><div class="fig"><img src="xxxx"></div></div>

</div>

　　main爲父級大容器，用來盛放 塊 box，全部的box都同樣的  

　　2.style樣式，基本樣式以下：

*{padding: 0; margin: 0; box-sizing: border-box; -webkit-transition: all .3s;}
#main{
　　position: relative; //由於box要絕對定位，因此給父級設置相對定位
}

.box{
　　padding: 10px 5px 5px 10px;
　　float: left;
}
.fig{border: 1px #ccc solid; border-radius: 4px; box-shadow: 0 0 5px rgba(0,0,0,.6); padding: 5px;}
.fig img{width: 200px;}

　　3. 主要js以下：

  1 ;(function ($){
  2 
  3 
  4 function show(el){
  5     el.style.display = 'block';
  6 }
  7 function hide(el){
  8     el.style.display = 'none';
  9 }
 10 
 11 function getById(id){
 12     return document.getElementById(id);
 13 }
 14 
 15 function getByClass(name,parent){
 16     var parent = parent ? document.getElementById(parent) : document;
 17     var eles = document.getElementsByTagName('*');
 18     var result = [];
 19     for(var i=0, len = eles.length; i < len; i++){
 20         if(eles[i].className == name){
 21             result.push(eles[i]);
 22         }
 23     }
 24     return result;
 25 }
 26 
 27 function getIndex(arr,val){
 28     for(var i in arr){
 29         if(arr[i] == val){
 30             return i;
 31         }
 32     }
 33     return -1;
 34 }
 35 
 36 
 37 var elMark = getById('Mark');
 38 var baseUrl = "./images/";
 39 var dataImg = {
 40     "data" : [
 41         {"src": '1.jpg'},
 42         {"src": '2.jpg'},
 43         {"src": '3.jpg'},
 44         {"src": '4.jpg'},
 45         {"src": '5.jpg'},
 46         {"src": '6.jpg'},
 47         {"src": '7.jpg'},
 48         {"src": '8.jpg'},
 49         {"src": '9.jpg'},
 50         {"src": '10.jpg'},
 51         {"src": '1.jpg'},
 52         {"src": '2.jpg'},
 53         {"src": '3.jpg'},
 54         {"src": '4.jpg'},
 55         {"src": '5.jpg'},
 56         {"src": '6.jpg'},
 57         {"src": '7.jpg'},
 58         {"src": '8.jpg'},
 59         {"src": '9.jpg'},
 60         {"src": '10.jpg'}
 61     ]
 62 }
 63 
 64 function WaterFull(insName){
 65     this.instance = insName;
 66     this.wrap = '';
 67     this.box = '';
 68     this.elwrap = '';
 69 }
 70 WaterFull.prototype = {
 71     init : function (parent, box){
 72         this.wrap = parent;
 73         this.box = box;
 74         this.elwrap = getById(parent);
 75         this.insertHtml();
 76     },
 77     insertHtml : function (){
 78         show(elMark);
 79         var self = this;
 80         for(var i=0, len = dataImg.data.length; i < len; i++){
 81             var url = baseUrl + dataImg.data[i].src;
 82             self.elwrap.appendChild(self.creatHtml(url));
 83         }
 84         setTimeout(function (){
 85             self.setPosition();
 86             hide(elMark);
 87         },400);
 88     },
 89     creatHtml : function (url){
 90         var box = document.createElement('div');
 91         box.className = this.box;
 92         var fig = document.createElement('div');
 93         fig.className = 'fig';
 94         box.appendChild(fig);
 95         var img = new Image();
 96         img.src = url;
 97         fig.appendChild(img);
 98         return box;
 99     },
100     setPosition : function (){
101         var hArr = [];
102         var boxs = getByClass(this.box, this.wrap);
103         var boxW = boxs[0].offsetWidth;
104         var cols = Math.floor(document.body.clientWidth / boxW);
105         this.elwrap.style.cssText = 'width: '+cols*boxW+'px;'+'margin: 0 auto;';
106         for(var i=0, len = boxs.length; i < len; i++){
107             if(i<cols){
108                 boxs[i].style.position = 'static';
109                 hArr.push(boxs[i].offsetHeight);
110             }else{
111                 var minH = Math.min.apply(null, hArr);
112                 var colsIndex = getIndex(hArr, minH)
113                 if(colsIndex == -1){
114                     alert("查詢失敗");
115                     return false;
116                 }
117                 boxs[i].style.cssText = "position: absolute; top: "+minH+"px;"+"left: "+boxW*colsIndex+"px";
118                 hArr[colsIndex] += boxs[i].offsetHeight;
119             }
120         }
121     },
122     checkLoad : function (){
123         var boxs = getByClass(this.box, this.wrap);
124         var lastH = boxs[boxs.length -1].offsetTop + boxs[boxs.length -1].offsetHeight;
125         var loadH = document.documentElement.clientHeight + document.body.scrollTop || document.documentElement.scrollTop;
126         return lastH < loadH;
127     }
128 }
129 
130 function main(){
131     var waterfull = new WaterFull();
132     waterfull.init('main','box');
133     window.onscroll = function (){
134         if(waterfull.checkLoad.call(waterfull)){
135             waterfull.insertHtml.call(waterfull);
136         }
137     }
138     window.onresize = function (){
139         waterfull.setPosition.call(waterfull);
140     }
141 }
142 
143 $.main = main;
144 
145 }(this))

View Code

預覽

所有js都在，若是須要全套代碼的 ，麻煩聯繫我一下哈，QQ號：309093631

 

更多內容會常常更新，謝謝關注！！！