原生JS响应式瀑布流

最新推荐文章于 2022-05-25 17:32:53 发布

如鹰展翅上腾

最新推荐文章于 2022-05-25 17:32:53 发布

阅读量361

点赞数

分类专栏： js系列文章标签：瀑布流响应式原生js

本文链接：https://blog.csdn.net/wdq121516/article/details/89011680

版权

js系列专栏收录该内容

8 篇文章 0 订阅

订阅专栏

原生JS响应式瀑布流

如何产生响应式列
1. 动态获取窗口的尺寸
2. 获取到列的固定宽度
3. 响应式列数=动态获取窗口的尺寸/获取到列的固定宽度

如何获取响应式列的最小高度？

把产生的列容器放在一个数组里面
这个数组使用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>

如鹰展翅上腾

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
原生JS响应式瀑布流

原生JS响应式瀑布流如何产生响应式列动态获取窗口的尺寸获取到列的固定宽度响应式列数=动态获取窗口的尺寸/获取到列的固定宽度如何获取响应式列的最小高度？把产生的列容器放在一个数组里面这个数组使用sort()方法进行升序排列产生的新数组的第一位就是高度最小的列网页结构和样式<!DOCTYPE html><html> <head&gt...
复制链接

扫一扫