js瀑布流原理实现揭秘 javascript 原生实现-白红宇

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

阅读量：4918 次

发布时间：2019-06-11

本文共 3842 字，大约阅读时间需要 12 分钟。

　　web，js瀑布流揭秘

　　瀑布流再很久之前流行，可能如我一样入行晚的，可能就没有机会去使用。但是这个技术终究是个挺炫酷的东西，花了一个上午来研究，用原生js实现了一个，下面会附上源码，供大家解读。

　　说起瀑布流，其实实现原理特别简单，而且方法有很多，现在说一个大众的方法，所谓瀑布流就是一堆样式差不多的盒子排列在一起，排列规则是，插入到高度最低的那一列，所以，实现起来就很简单了，布局分块，页面分列，计算每一列的高度，然后把块插入到列高度低的那一列，设置定位，left和top值就好了。

　　1.从布局开始，基本布局如下：

</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

View Code

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

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

转载于:https://www.cnblogs.com/donglegend/p/4721227.html

你可能感兴趣的文章