js瀑布流 原理实现揭秘 javascript 原生实现

  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 = ' '+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))