js原生代码写瀑布流

最新推荐文章于 2022-11-19 09:40:15 发布

Vimo

最新推荐文章于 2022-11-19 09:40:15 发布

阅读量812

点赞数

分类专栏： Javascript web前端综合瀑布流布局文章标签： javascript 布局瀑布流

本文链接：https://blog.csdn.net/u012455307/article/details/27940759

版权

Javascript 同时被 3 个专栏收录

4 篇文章 0 订阅

订阅专栏

web前端综合

1 篇文章 0 订阅

订阅专栏

瀑布流布局

1 篇文章 0 订阅

订阅专栏

在看代码之前,解释一下瀑布流

瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest，逐渐在国内流行开来。国内大多数清新站基本为这类风格。

更多优缺点和其他详细介绍可以参照 http://baike.baidu.com/view/7151782.htm?fr=aladdin

下面是代码

html 部分这部分没什么好说的

<html>
<head>
<title>瀑布流</title>
<mate charset="utf-8" />
</head>
<body>
<div id="main">
	<div class="box">
		<div class="pic"><img src="img/0.jpg" /></div>
	</div>
//省略 若干重复 class为box的div 图片地址随需求更换
</div>
</html>

css 加点简单样式

*{
	margin:0; padding:0;
}
#main{
	position:relative; margin:0 auto;
}
.box{
	padding:15px 0 0 15px; float:left;
}
.pic{
	padding:10px; border:1px solid #ccc; border-radius:5px; border-shadow:0 0 5px #ccc;
}
.pic img{
	width:165px; height:auto;
}

js部分还有很多值得优化的地方

window.οnlοad=function(){
	waterfall('main','box');
	var num = 12;//滚动加载的图片数量 可自定义
	window.οnscrοll=function(){
		if (checkScrollSlide())
		{
			var parent = document.getElementById('main');
			for (var i = 0; i < num; i++)
			{
				var oBox=document.createElement('div');
				oBox.className='box';
				parent.appendChild(oBox);
				var oPic=document.createElement('div');
				oPic.className='pic';
				oBox.appendChild(oPic);
				var oImg=document.createElement('img');
				oImg.src = "img/" + parseInt(Math.random()*36) + ".jpg";
				oPic.appendChild(oImg);
			}
			waterfall('main','box');
		}
	}
}
function waterfall(parent,box){
	//将main下的所有class为box的元素取出来
	var oParent = document.getElementById(parent);
	var oBoxs = getByClass(oParent,box);
	//计算列数
	var oBoxW=oBoxs[0].offsetWidth;
	var clos = Math.floor(document.documentElement.clientWidth / oBoxW);
	//设置main的宽
	oParent.style.cssText='width:'+oBoxW*clos+'px; margin:0 auto;'
	var hArr = [];
	for (var i = 0; i < oBoxs.length; i++)
	{
		if (i < clos)
		{
			hArr.push(oBoxs[i].offsetHeight);
		} 
		else
		{
			var minH = Math.min.apply(null,hArr);
			var index = getMinhIndex(hArr,minH);
			oBoxs[i].style.position='absolute';
			oBoxs[i].style.top=minH+'px';
			oBoxs[i].style.left=oBoxs[index].offsetLeft+'px';
			hArr[index] += oBoxs[i].offsetHeight;
		}
	}
}
//根据class获取元素
function getByClass(parent,clsName){
	var boxArr=new Array(), 
		oElements=parent.getElementsByTagName('*');
	for (var i = 0; i < oElements.length; i++){
		if(oElements[i].className == clsName){
			boxArr.push(oElements[i]);
		}		
	}
	return boxArr;
}
function getMinhIndex(arr,val){
	for (var i = 0; i < arr.length; i++)
	{
		if(arr[i] == val)
			return i;
	}
}
//检测是否具备了加载条件
function checkScrollSlide(){
	var oParent=document.getElementById('main');
	var oBoxs = getByClass(oParent,'box');
	var lastBoxH = oBoxs[oBoxs.length-1].offsetTop+Math.floor(oBoxs[oBoxs.length-1].offsetHeight / 2);<pre code_snippet_id="372135" snippet_file_name="blog_20140601_4_3290862" name="code" class="javascript">// 为了同时兼容标准模式和混杂模式获取窗口高度和滚动条位置
	var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
	var height = document.body.clientHeight || document.documentElement.clientHeight;
	return lastBoxH < scrollTop + height;
}