用原生JS实现瀑布流

最新推荐文章于 2024-05-27 15:48:57 发布

水稻北曦

最新推荐文章于 2024-05-27 15:48:57 发布

阅读量197

点赞数

本文链接：https://blog.csdn.net/Nshuidaobenxi/article/details/84336637

版权

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{padding:0;margin:0;list-style:none;}
		div{width:1200px;margin:100px auto;border:1px solid pink;overflow: hidden;}
		ul{width:290px;float:left;margin-right:10px;}
		ul li{margin-top:10px;border-radius: 5px;}
		.change{margin:0;}
	</style>
</head>
<body>
	<div>
		<ul></ul>
		<ul></ul>
		<ul></ul>
		<ul class="change"></ul>
	</div>

HTML+CSS布局

<script type="text/javascript">
	var aUl = document.getElementsByTagName('ul');
	var aDiv = document.getElementsByTagName('div')[0];
	// 封装随机函数
	function rnd(n,m){
		return parseInt(Math.random()*(m-n)+n);
	}
	// 创建动态li
	function createLi(){
		var oLi = document.createElement('li');
		oLi.style.background = 'rgb('+rnd(0,256)+','+rnd(0,256)+','+rnd(0,256)+')';
		oLi.style.height = rnd(150,350)+'px';
		return oLi;
	}
	// 创建20个li
	function create20Li(){
	  for(var i = 0;i<20;i++){
	  	var oLi = createLi();
	  	// 创建数组
		  var arr = [];
		  // 把ul放进数组里进行排序
	      for(var j = 0;j<aUl.length;j++){
	      	arr[j] = aUl[j];
	      }
	      arr.sort(function(n1,n2){
	      	return n1.offsetHeight - n2.offsetHeight;
	      })
	      arr[0].appendChild(oLi);
	  }
	}
	create20Li();

封装调用函数实现瀑布流效果

 window.onscroll = window.onresize =function(){
    	var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    	var clientHeight = document.documentElement.clientHeight ||document.body.clientHeight;
    	if(aDiv.offsetHeight<scrollTop+clientHeight-50){
    		create20Li();
    	}
    }

</script>
</body>
</html>

利用onscroll事件让内容不断加载

在这里插入图片描述
见证奇迹的时刻到啦！