原生JS响应式瀑布流
-
如何产生响应式列
- 动态获取窗口的尺寸
- 获取到列的固定宽度
- 响应式列数=动态获取窗口的尺寸/获取到列的固定宽度
-
如何获取响应式列的最小高度?
- 把产生的列容器放在一个数组里面
- 这个数组使用sort()方法进行升序排列
- 产生的新数组的第一位就是高度最小的列
网页结构和样式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .cols{ float: left; width: 160px; border: solid 5px white; } .image{ width: 160px; display: inline-block; font-size: 40px; margin-bottom: 5px; } section{ margin: 0 auto;//这个容器里面存放列标签 border: solid 1px red; } </style> </head> <body> <section></section> </body> </html> <!-- 核心思想:首先创建列,然后不断找到最小的列向里面添加内容;在添加内容之后,该列的高度会再一次发生变化 因为从头到尾,这个列的本质没变,变的只是高度,我们只需要根据列的高度就可以得到最小列 -->
js部分
<!-- 核心思想:首先创建列,然后不断找到最小的列向里面添加内容;在添加内容之后,该列的高度会再一次发生变化 因为从头到尾,这个列的本质没变,变的只是高度,我们只需要根据列的高度就可以得到最小列 --> <script> var allArr=[];//这个数组用来存放列 var wrap=document.querySelector("section");//获取到包含列的容器 //第一步:创造多少列,并且根据窗口的大小自动调整列数 function getCols(){//因为每一次窗口变化都会调用这个方法,所以可以动态的获取窗口尺寸,从而产生响应式列数 //获取窗口尺寸 var bW=window.innerWidth; var cols=Math.floor(bW/170); for(var i=0;i<cols;i++){ //根据列数创造列容器标签 var oDiv=document.createElement("div"); oDiv.classList.add("cols"); allArr.push(oDiv); wrap.appendChild(oDiv); } //使瀑布流一直居中 wrap.style.width=cols*170+"px"; } function getMin(){ //因为每一次插入图片都会调用这个方法,而这个方法主要作用就是找到最小高度列 var arr=allArr.sort(function(a,b){ return a.offsetHeight-b.offsetHeight; }) return arr[0]; } function createEle(num){//创造多少个图片 for(var i=0;i<num;i++){ var Ospan=document.createElement("span"); Ospan.classList.add("image"); Ospan.innerHTML=i Ospan.style.height=Rnd(50,300)+"px"; Ospan.style.backgroundColor="rgb("+Rnd(0,255)+","+Rnd(0,255)+","+Rnd(0,255)+")" //向最小高度列中添加图片 getMin().appendChild(Ospan); } } function Rnd(a,b){//获取到a到b之间的随机数 return Math.floor(Math.random()*(b-a)+a); } getCols(); createEle(8) window.onresize=function(){ //每一窗口改变都要清空上一次的数据,重新绘制瀑布流 wrap.innerHTML=""; allArr=[]; getCols(); console.log(111) createEle(8) } </script>