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如下：

 ;(function ($){

 function show(el){
     el.style.display = 'block';
 }
 function hide(el){
     el.style.display = 'none';
 }

 function getById(id){
     return document.getElementById(id);
 }

 function getByClass(name,parent){
     var parent = parent ? document.getElementById(parent) : document;
     var eles = document.getElementsByTagName('*');
     var result = [];
     for(var i=0, len = eles.length; i < len; i++){
         if(eles[i].className == name){
             result.push(eles[i]);
         }
     }
     return result;
 }

 function getIndex(arr,val){
     for(var i in arr){
         if(arr[i] == val){
             return i;
         }
     }
     return -1;
 }

 var elMark = getById('Mark');
 var baseUrl = "./images/";
 var dataImg = {
     "data" : [
         {"src": '1.jpg'},
         {"src": '2.jpg'},
         {"src": '3.jpg'},
         {"src": '4.jpg'},
         {"src": '5.jpg'},
         {"src": '6.jpg'},
         {"src": '7.jpg'},
         {"src": '8.jpg'},
         {"src": '9.jpg'},
         {"src": '10.jpg'},
         {"src": '1.jpg'},
         {"src": '2.jpg'},
         {"src": '3.jpg'},
         {"src": '4.jpg'},
         {"src": '5.jpg'},
         {"src": '6.jpg'},
         {"src": '7.jpg'},
         {"src": '8.jpg'},
         {"src": '9.jpg'},
         {"src": '10.jpg'}
     ]
 }

 function WaterFull(insName){
     this.instance = insName;
     this.wrap = '';
     this.box = '';
     this.elwrap = '';
 }
 WaterFull.prototype = {
     init : function (parent, box){
         this.wrap = parent;
         this.box = box;
         this.elwrap = getById(parent);
         this.insertHtml();
     },
     insertHtml : function (){
         show(elMark);
         var self = this;
         for(var i=0, len = dataImg.data.length; i < len; i++){
             var url = baseUrl + dataImg.data[i].src;
             self.elwrap.appendChild(self.creatHtml(url));
         }
         setTimeout(function (){
             self.setPosition();
             hide(elMark);
         },400);
     },
     creatHtml : function (url){
         var box = document.createElement('div');
         box.className = this.box;
         var fig = document.createElement('div');
         fig.className = 'fig';
         box.appendChild(fig);
         var img = new Image();
         img.src = url;
         fig.appendChild(img);
         return box;
     },
     setPosition : function (){
         var hArr = [];
         var boxs = getByClass(this.box, this.wrap);
         var boxW = boxs[0].offsetWidth;
         var cols = Math.floor(document.body.clientWidth / boxW);
         this.elwrap.style.cssText = 'width: '+cols*boxW+'px;'+'margin: 0 auto;';
         for(var i=0, len = boxs.length; i < len; i++){
             if(i<cols){
                 boxs[i].style.position = 'static';
                 hArr.push(boxs[i].offsetHeight);
             }else{
                 var minH = Math.min.apply(null, hArr);
                 var colsIndex = getIndex(hArr, minH)
                 if(colsIndex == -1){
                     alert("查询失败");
                     return false;
                 }
                 boxs[i].style.cssText = "position: absolute; top: "+minH+"px;"+"left: "+boxW*colsIndex+"px";
                 hArr[colsIndex] += boxs[i].offsetHeight;
             }
         }
     },
     checkLoad : function (){
         var boxs = getByClass(this.box, this.wrap);
         var lastH = boxs[boxs.length -1].offsetTop + boxs[boxs.length -1].offsetHeight;
         var loadH = document.documentElement.clientHeight + document.body.scrollTop || document.documentElement.scrollTop;
         return lastH < loadH;
     }
 }

 function main(){
     var waterfull = new WaterFull();
     waterfull.init('main','box');
     window.onscroll = function (){
         if(waterfull.checkLoad.call(waterfull)){
             waterfull.insertHtml.call(waterfull);
         }
     }
     window.onresize = function (){
         waterfull.setPosition.call(waterfull);
     }
 }

 $.main = main;

 }(this))

预览

全部js都在，如果需要全套代码的 ，麻烦联系我一下哈，QQ号：309093631

更多内容会经常更新，谢谢关注！！！