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

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>

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

时间: 2024-10-26 10:36:36

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

Android瀑布流,解决oom

这是一个Android瀑布流的实现demo. 瀑布流我的实现是定义三个linearlayout,然后向里面addView(),如果多了会出现oom异常,所以做了一些处理. 1.lrucache缓存 2.只显示当前屏的图片 3.滑动过程中不加载图片 4.大图缩放成小图 直接看代码: PhotoFallScrollView.java主类 自定义的ScrollView. package com.pangzaifei.falls; import java.io.BufferedInputStream;

overflow解决float浮动后高度自适应问题

也许你在做网页的时候发现,发一个区块内的元素被应用了float之后,那么整个box的高度对就不以被浮动对象的高度为标准了.如图中的城市导航内的城市列表中采用了float之后,那个外框的高度并不是内容元素的高度: 怎么解决这个问题呢?经发现可以采用overflow来解决!方法是在父元素加上如下代码即可 overflow:auto; zoom:1; overflow:auto;是让高度自适应, zoom:1;是为了兼容IE6,也可以用height:1%;的方式来解决. 1 1 <!DOCTYPE h

【前端】浮动后父容器高度自适应

float:left; overflow:hidden; 当一个容器内元素都浮动后,它将高度将不会随着内部元素高度的添加而添加,所以造成内容元素的显示超出了容器. 在我们没有为容器设置高度的时候,容器的高度是自适应的.然而,当容器中的元素都浮动以后,脱离了文档流.容器的高度因为自适应的原因就为0了. 为了方便大家观察,我为父容器设置了边框.内间距.原本上面四张图片是在上面的容器中的.将图片设置左浮动以后,容器的高度就为0了. Q1:这会为我们带来什么影响? A1:浏览器在解析下一个容器的时候,默

浮动后父容器高度自适应

当一个容器内元素都浮动后,它将高度将不会随着内部元素高度的增加而增加,所以造成内容元素的显示超出了容器.为了便于查看效果,把刚才实例中的#layout增加一个边框和内边距: #layout { width:400px; border:2px solid #ccc; padding:2px;} 文章出处:标准之路(http://www.aa25.cn) 看到没,它没有被内容元素给撑高,要解决这个问题,需要使用以下样式 overflow:auto; zoom:1; overflow:auto;是让高

解决Iframe跨域高度自适应,利用window.postMessage()实现跨域消息传递页面高度(JavaScript)

在iframe跨域引用高度自适应这块写的js方式都试了不管用,最终使用的是window.postMessage() 跨域获取高度 传递信息 1.首先,在主页面上使用iframe引入子页面:也就是A.html页面引入B.html页面,下面看看A.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head>

解决float之后容器高度坍塌

在使用float属性的时候,我们经常会遇到这样的问题,当元素的设置了float,而父容器的高度就坍塌了,如下效果 法国球星亨利宣布退役之后,国际足坛大腕们纷纷对他表示敬意,尤其是他以前效力的阿森纳队众球星都称赞他为“传奇人物.” 国际足联主席布拉特也发表推文说:“衷心祝福亨利.很遗憾看到一位世界冠军离开了赛场,但也高兴你仍然距离足球非常近.” 亨利在2007年离开阿森纳后,沃尔科特继承了他的14号球衣,这位17岁就入选英格兰队的边锋在推特上说:“在我的职业生涯中,你一直在激励我.感谢蒂埃里·亨利

解决NSAttributedString与UILabel高度自适应计算问题

两个类扩展方法: /** *  修改富文本的颜色 * *  @param str   要改变的string *  @param color 设置颜色 *  @param range 设置颜色的文字范围 * *  @return 新的AttributedString */ - (NSMutableAttributedString *)setTextColorWithStr:(NSString *)str Color:(UIColor *)color Range:(NSRange)range; /*

代码: 两列图片瀑布流(一次后台取数据,图片懒加载。下拉后分批显示图片。图片高度未知,当图片onload后才显示容器)

代码: 两列图片瀑布流(一次后台取数据,无ajax,图片懒加载.下拉后分批显示图片.图片高度未知,当图片onload后才显示容器) [思路]: 图片瀑布流,网上代码有多种实现方式,也有各类插件.没找到合意的,所以根据网上找的一段代码,进行了较大改动. 需引用 zepto 或 jquery. 我这个是应用于手机上的,两列瀑布流,图片高度未知——等图片的onloaded事件触发后,才对容器进行计算和定位. 大容器是 $("#imgList"),容器格子是$(".pin"

js实现瀑布流以及加载效果

一.瀑布流是个啥? 瀑布流,是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部. 最早采用瀑布流布局的网站是Pinterest,逐渐在国内流行开来,比如我们熟知的百度图片的布局,在"很久"以前,百度图片还是需要一页一页的点击进行查看更多图片,而现在的瀑布流布局使用户查找图片更加方便. 二.瀑布流的优缺点 优点: 1.节省了页面的空间,不再需要导航和页码按钮. 2.增强了用户的体验,使用户的体验更多的是在于浏览图