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))
全部js都在,如果需要全套代码的 ,麻烦联系我一下哈,QQ号:309093631
更多内容会经常更新,谢谢关注!!!