瀑布流，并且解决定位和容器高度自适应问题，随意放哪都可以用。

标签：瀑布流   jquery   css   html   

css:

#main{
	width:956px;
	height: auto;
	margin: 10px auto 0px auto;
	border:2px solid #ccc;
	float:left;
	position:relative;
}
#main .pin{
	width:220px;
	height:auto;
	padding:15px 0px 0px 15px;
	float:left;
}
#main .pin .box{
	width:203px;
	height:auto;
	padding:10px;
	border:1px solid #333;
	box-shadow:0px 0px 5px #333;
}
#main .pin .box img{
	width:100%;
}

jquery:如果你想测试请将第一行function waterfall()换成$(function(){})再运行，我这里将其封装成函数;

//瀑布流
	function waterfall(){
		var apin = $('#main .pin');
		var oparent = $('#main');
		var pos=[];
		apin.each(function(i){
			//4是第一排的元素个数
			if(i<4){
				//将第一排的高度存入到数组中
				pos[i] = apin.eq(i).innerHeight();
			}else{
				//按照瀑布流定位
				//获取数组中的最小值
				var minh = Math.min.apply({},pos);
				//获取高度最小的键名
				var mink = getMinKey(pos,minh);
				//获取高度最小的距离左边的距离
				var minl = apin[mink].offsetLeft;
				//定位元素位置
				apin.eq(i).css({
					position:'absolute',
					top:minh,
					left:minl
				});
				//将加入的元素与其上面元素的高度相加，为下面元素排列做准备
				pos[mink] +=apin.eq(i).innerHeight();						
			}					
		});
		//设置最外容器的高以适应内容的变化
		var maxh = Math.max.apply({},pos)+10;
		oparent.css('height',maxh)		
	}
	//获取数组中最小元素的键名
		function getMinKey(arr,min){
			for(var key in arr){
				if(arr[key]==min){
					return key;
				}
			}
		}

html:

<div id="main">
		<div class="pin">
			<div class="box">
				<img src="./11.jpg"></img>
			</div>
		</div>
		<div class="pin">
			<div class="box">
				<img src="./2.jpg"></img>
			</div>
		</div>
</div>

瀑布流，并且解决定位和容器高度自适应问题，随意放哪都可以用。,布布扣,bubuko.com

瀑布流，并且解决定位和容器高度自适应问题，随意放哪都可以用。

标签：瀑布流   jquery   css   html   

原文地址：http://blog.csdn.net/yanlintao1/article/details/38491137