JS原生瀑布流

版权声明：本文为博主原创文章，转载请注明出处： https://blog.csdn.net/weixin_43720095/article/details/84292647

JS原生瀑布流（适合学习案例）

瀑布流：通俗讲就是鼠标下滑时，图片或者其他块像瀑布一样源源不断的显现。

 html代码结构

        <div id="fall">
		<ul></ul>
		<ul></ul>
		<ul></ul>
		<ul class="change"></ul>
	</div>

css代码

*{padding: 0;margin:0;list-style: none;}
#fall{width: 1200px;margin:0 auto;}
#fall ul{margin-right: 10px;width: 290px;float: left;}
#fall ul li{margin-top: 10px;border-radius: 5px;}
.change{margin:0;}

js代码

	//获取瀑布流盒子及ul
	var oDiv = document.getElementById('fall');
	var aUl = oDiv.getElementsByTagName('ul');
	//封装随机数
	function rnd(n,m){
		return parseInt(Math.random()*(m-n)+n);
	}
	//封装动态创建LI
	function creatLi(){
		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;
	}

		function create20Li(){
		for(var i = 0;i<20;i++){
			var oLi = creatLi();
			//创建数组
			var arr = [];
			//将ul放到数组中进行排序
			for(var j = 0;j<aUl.length;j++){
				arr[j] = aUl[j];
			}
			arr.sort(function(ul1,ul2){
				return ul1.offsetHeight - ul2.offsetHeight;
			})
			arr[0].appendChild(oLi);
		}
	}
	create20Li();
	window.onscroll = window.resize = function(){
		var scrollT = document.documentElement.scrollTop ||document.body.scrollTop;
		var clientH = document.documentElement.clientHeight ||document.body.clientHeight;
		// 如果滚动高度和视口高度之和大于瀑布流盒子高度一直添加li
		if (oDiv.offsetHeight<scrollT+clientH-50) {
			create20Li();
		}
	}

效果如下

随机颜色瀑布流