原生js实现瀑布流以及加载效果——李帅醒博客

今天教大家使用原生js实现瀑布流以及加载效果，下回再教大家使用使用原生JS实现响应式瀑布流布局，还是先从简单的入手！

1、首先列数是固定的，不同的是高度，随机产生。

2、一排结束后，如第6个元素，是添加再上一排最短的位置，所以要做一个大小高度判断。

3、每次滚动条触发事件，加载新的元素（判断滚动条到底部，需要用到DOM的三个属性值，即scrollTop、clientHeight、scrollHeight）。

应用场景：瀑布流主要应用在图片展示页面上。如果有一大批图片需要展示，原始图片尺寸不一致，又希望每张图片都能不剪裁，完整显示，那么就要给图片规定一个宽度，解放它们的高度。利用网页高度不限这个特性，充分利用页面的空间，尽可能的展示多的图片。瀑布流的实现方法挺多，但能做到响应式列数变化，自由布局的并不多。如UC新闻页面，百度图片手机页面、蘑菇街。

CSS页面：

*{
			margin: 0px;
			padding: 0px;
			box-sizing:border-box;
		}
		body{
			margin: 0px auto;
			width: 1100px;
		}
		ul{
			margin-top: 10px;
			list-style: none;
			width: 200px;
			padding: 3px 3px 0px 3px;
			float: left;
			margin-left: 5px;
		}
		li{
			width: 190px;
			background: yellow;
			padding: 3px;
			margin-bottom: 3px;
			border-radius: 5px;
			box-shadow: 10px 10px 10px #666;
		}
	</style>

HTML页面：

<body>
	<ul></ul>	
	<ul></ul>	
	<ul></ul>	
	<ul></ul>	
	<ul></ul>	
</body>

SJ页面代码：

<script type="text/javascript">
	uls=document.querySelectorAll("ul");
	var num=1;
	function statr(){
		for(var i=0;i<30;i++){
			//把4个ul的高度放到一个数组中
			var ArrHeight=[uls[0].offsetHeight,uls[1].offsetHeight,uls[2].offsetHeight,uls[3].offsetHeight,uls[4].offsetHeight];
			var index=mini(ArrHeight);	
			CreateLi(uls[index],num++);
		}
	}
	statr();
	//触发滚动事件，继续创建
	window.onscroll=function(){
		// html总高度-可视化窗口高度=body的滚动高度,所以当滚动快要到达底部,还没有到达的时候,再去执行函数,创建新的ul
		//兼容新写法
		var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
		var	clientHeight=document.documentElement.clientHeight||document.body.clientHeight||window.innerHeight;
		if(document.documentElement.offsetHeight-clientHeight<=scrollTop){
			statr();
		}
	}
	//创建li
	function CreateLi(ul,num){
		var li=document.createElement("li");
		li.style.height=rand()+"px";
		li.innerHTML=num;
		li.style.background=randomColor();
		ul.appendChild(li);
	}
	//获取最小高度
	function mini(arr){
		var miniHeight=arr[0];
		for(var i=0;i<arr.length;i++){
			if(arr[i]<miniHeight){
				miniHeight=arr[i];	
			}			
		}
	//每次返回的都是最短ul的下标			
		return arr.indexOf(miniHeight);
	}
	//随机高度
	function rand() {
        return parseInt(Math.random() * 300) + 100;
    }
    //颜色随机
    function randomColor(){
		var color = "rgb("
		var r = parseInt(Math.random()*256);
		var g = parseInt(Math.random()*256);
		var b = parseInt(Math.random()*256);
		color = color+r+","+g+","+b+")";
		return color;	
	}
</script>

（我吃酸萝卜新浪微博http://www.weibo.com/wcslb ---李帅醒著）

原生js实现瀑布流以及加载效果——李帅醒博客

猜你喜欢