js实现瀑布流

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

何不于君指上听

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

阅读量582

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/z_xiaoqi/article/details/20402265

版权

javascript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

在本次项目中，我们要实现很多效果，瀑布流是其中一个

思路：可以先排列一行，然后根据每列的高度判断以下的内容模块要放置在那一列。瀑布流所在父容器高度随之改变。而所有子元素的定位均使用绝对定位。

部分html代码：

<body> 
<ul id="flow-box"> 
<li><img src="../images/1.jpg"/><a href="#">图片标题1</a></li> 
<li><img src="../images/18.jpg"/><a href="#">图片标题2</a></li> 
<li><img src="../images/15.jpg"/><a href="#">图片标题3</a></li> 
<li><img src="../images/17.jpg"/><a href="#">图片标题4</a></li> 
<li><img src="../images/5.jpg"/><a href="#">图片标题5</a></li> 
<li><img src="../images/6.jpg"/><a href="#">图片标题6</a></li> 
<li><img src="../images/7.jpg"/><a href="#">图片标题7</a></li> 
<li><img src="../images/8.jpg"/><a href="#">图片标题8</a></li> 
<li><img src="../images/9.jpg"/><a href="#">图片标题9</a></li> 
<li><img src="../images/3.jpg"/><a href="#">图片标题10</a></li> 
<li><img src="../images/11.jpg"/><a href="#">图片标题11</a></li> 
<li><img src="../images/12.jpg"/><a href="#">图片标题12</a></li> 
<li><img src="../images/13.jpg"/><a href="#">图片标题13</a></li> 
<li><img src="../images/14.jpg"/><a href="#">图片标题14</a></li> 
<li><img src="../images/2.jpg"/><a href="#">图片标题15</a></li> 
<li><img src="../images/16.jpg"/><a href="#">图片标题16</a></li> 
<li><img src="../images/10.jpg"/><a href="#">图片标题17</a></li> 
<li><img src="../images/4.jpg"/><a href="#">图片标题18</a></li> 
</ul> 
<div class="loadwrap" id="jz">加载</div> 
</body>

css代码：

<style type="text/css"> 
body{margin:0; font-family:微软雅黑;} 
#flow-box
{
	margin:10px auto 0 auto;
	padding:0; 
	position:relative;
	border:1px solid #000;
}
#flow-box li
{ 
	width:190px;
	position:absolute;
	padding:10px;
	border:solid 1px #f00;
	list-style:none; 
		opacity:0; 
		-moz-opacity:0; 
		filter:alpha(opacity=0); 
			-webkit-transition:opacity 500ms ease-in-out; 
			-moz-transition:opacity 500ms ease-in-out; 
			-o-transition:opaicty 500ms ease-in-out; 
			transition:opaicty 500ms ease-in-out;
} 
#flow-box li img
{
	width:100%;
} 
#flow-box li a
{
	display:block;
	width:100%;
	text-align:center;
	font-size:14px;
	color:#333;
	line-height:18px;
	margin-top:10px;
	text-decoration:none;
} 
.loadwrap
{
	position:absolute;
	left:0;
	width:100%; 
	text-align:center;
	border:1px solid red;
	
} 
</style>

<script type="text/javascript">
	function flow(mh,mv)
	{
		try{
		//计算可放入数据块的列数
		var wid=document.documentElement.offsetWidth;
		//alert("文档宽度="+wid);
		var ul=document.getElementById("flow-box");
		var lis=document.getElementsByTagName('li');
		//alert(lis[0].offsetWidth);
		var blockwidth=lis[0].offsetWidth+mh;//数据块的宽度
		//alert("数据块宽度="+blockwidth);
		var cols=Math.floor(wid/blockwidth);
		//alert("可以放的列数="+cols);
		ul.style.width=blockwidth*cols-mh+"px";
		
		//将各个数据块的高度记入数组中。
		var harr=[];
		for(var i=0;i<lis.length;i++)
		{
			//alert(i+"个高度="+lis[i].offsetHeight);
			harr.push(lis[i].offsetHeight);
		}
		//将数据块第一行排列好，并将列高度记入数组
		var colH=[];
		for(var j=0;j<cols;j++)
			{
			lis[j].style.top="0";
			
			alert("第"+j+"个的top="+lis[j].style.top);
			//alert(blockwidth);
			lis[j].style.left=j*blockwidth+"px";
			alert("第"+j+"个的left="+lis[j].style.left);
			lis[j].style.opacity = "1"; 
			lis[j].style["-moz-opacity"] = "1"; 
			lis[j].style["filter"] = "alpha(opacity=100)"; 
			colH.push(harr[j]);
			}
			for(var i=cols;i<lis.length;i++)
			{
				var key=_getMinKey(colH);
				lis[i].style.top=colH[key]+mv+"px";
				lis[i].style.left=key*blockwidth+"px";
				lis[i].style.opacity = "1"; 
				lis[i].style["-moz-opacity"] = "1"; 
				lis[i].style["filter"] = "alpha(opacity=100)"; 
				colH[key]+=harr[i]+mv;
			}
			for(var k=0;k<colH.length;k++)
			{
				alert("colH数组的第"+k+"个元素是："+colH[k]);
			}
			var top=_getMaxValue(colH)+50+"px";
			alert("top="+top);
			document.getElementById("jz").style.top=top;
		}
		
		catch(e)
		{
		alert(e);
		}
	}
	window.οnlοad=function()
	{
		flow(10,10);
	}
	function _getMinKey(arr)
	{//计算数组中的最小高度的索引值
		var a=arr[0];
		var b=0;
		for(var i in arr)
		{	if(arr[i]<a)
			{
			a=arr[i];
			b=i;
			}
		}
		return b;
	}
	function _getMaxValue(arr) 
	{//计算数组中的最大值	
		var a = arr[0]; 
		for (var k in arr) 
		{ 
		if (arr[k] > a) 
		{ 
		a = arr[k]; 
		} 
		}	 
	return a; 
	} 
</script>