Fork me on GitHub

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

 

更多内容会经常更新,谢谢关注!!!

  

posted @ 2015-08-11 15:50  donglegend  阅读(1387)  评论(0编辑  收藏  举报