`

JQ 瀑布流

 
阅读更多

demo.css

*{
	padding: 0;
	margin: 0;
}
.wrap{
	position: relative;
}
.box{
	position: absolute;
	left: 0;
	top: 0;
	width: 250px;
}
.box img{
	width: 250px;
}

 

demo.js

$(function(){
	$('img').load(function(){
		var box = $('.box');
		var boxHeight = {
			leftBox:[],
			centerBox:[],
			rightBox:[]
		}
		for(var i=0;i<box.length;i++){
			var now = i%3;		//now的值为0,1,2
			switch(now){
				case 0:
					box.eq(i).css('left','10px');
					boxHeight.leftBox.push(box.eq(i).height());
					var now2 = Math.floor(i/3);

					if(now2==0){
						box.eq(i).css('top',0);
					}else{
						var total = 0;
						for(var j=0;j<now2;j++){
							total += boxHeight.leftBox[j]+10;
						}
						box.eq(i).css('top',total+'px')
					}
				break;
				case 1:
					box.eq(i).css('left','270px');
					boxHeight.centerBox.push(box.eq(i).height());
					var now2 = Math.floor(i/3);

					if(now2==0){
						box.eq(i).css('top',0);
					}else{
						var total = 0;
						for(var j=0;j<now2;j++){
							total += boxHeight.centerBox[j]+10;
						}
						box.eq(i).css('top',total+'px')
					}
				break;
				case 2:
					box.eq(i).css('left','530px');
					boxHeight.rightBox.push(box.eq(i).height());
					var now2 = Math.floor(i/3);

					if(now2==0){
						box.eq(i).css('top',0);
					}else{
						var total = 0;
						for(var j=0;j<now2;j++){
							total += boxHeight.rightBox[j]+10;
						}
						box.eq(i).css('top',total+'px')
					}
				break;
			}
		}
	});
});

 

demo.html

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>waterFall</title>
<link rel="stylesheet" href="demo.css">
<script src="jquery.js"></script>
<script src="demo.js"></script>
</head>
<body>
<div class="wrap">
	<div class="box">
		<img src="1.jpg" alt="">
		<p>1111111</p>
	</div>
	<div class="box">
		<img src="2.jpg" alt="">
		<p>22222222</p>
	</div>
	<div class="box">
		<img src="3.jpg" alt="">
		<p>33333333</p>
	</div>
	<div class="box">
		<img src="4.jpg" alt="">
		<p>4444444</p>
	</div>
	<div class="box">
		<img src="5.jpg" alt="">
		<p>55555555</p>
	</div>
	<div class="box">
		<img src="6.jpg" alt="">
		<p>666666666666</p>
	</div>
	<div class="box">
		<img src="7.jpg" alt="">
		<p>77777777</p>
	</div>
	<div class="box">
		<img src="8.jpg" alt="">
		<p>888888888888888</p>
	</div>
	<div class="box">
		<img src="9.jpg" alt="">
		<p>99999999999999</p>
	</div>
</div>
</body>
</html>

 

效果图:

 

 

 

  • 大小: 881.9 KB
分享到:
评论

相关推荐

    JQ 瀑布流的插件

    “JQ瀑布流插件”通常是指基于jQuery的、用于实现瀑布流布局的JavaScript插件。这些插件简化了开发者实现瀑布流布局的过程,通过简单的API调用和配置选项,就能在网页上快速构建出美观的瀑布流布局。 这个压缩包中...

    js jq 瀑布流

    瀑布流布局,也被称为Masonry布局,是一种网页布局方式,常用于展示图片或者商品,使得页面在不同分辨率和屏幕尺寸下都能呈现出良好的视觉效果。它以其独特的“流动”特性,让内容块像瀑布一样逐个排列,每列高度...

    JQ瀑布流加载

    总的来说,JQ瀑布流加载涉及到的技术点包括:jQuery的DOM操作、AJAX请求、JSON数据解析、滚动事件监听以及瀑布流布局算法的实现。通过这些技术的组合,我们可以在网页上实现流畅且美观的瀑布流加载效果,提高用户...

    jq实现瀑布流

    瀑布流布局,也被称为Masonry布局,是一种在网页设计中广泛应用的展示方式,尤其在图片墙、电商产品展示等场景中十分常见。这种布局的特点是元素随着页面滚动而垂直排列,每行元素的顶部对齐,形成类似瀑布的效果。...

    JQ 使用waterfall插件实现瀑布流

    瀑布流布局是一种常见的网页设计方式,它模仿了瀑布两侧连续不断的瀑布形态,使得网页上的内容可以自上而下、逐列加载,同时保持各列高度一致。在前端开发中,jQuery是一个广泛使用的JavaScript库,提供了丰富的API...

    JQ 用最少代码实现瀑布流布局

    瀑布流布局,又称Masonry布局,是一种常见的网页布局方式,尤其在展示图片或者商品时非常流行。这种布局方式的特点是每一列的顶部对齐,但列与列之间的高度不一致,形成一种像瀑布一样逐级下降的效果。在前端开发中...

    瀑布流布局 有两种布局 里面有JS的方式也有JQ的插件 可自由选择

    瀑布流布局,也被称为Masonry布局,是一种网页布局模式,其特点是内容元素会像瀑布一样依次自上而下排列,每一列的元素顶部对齐,但各列的宽度可能不一致,形成一种错落有致的视觉效果。这种布局常用于图片展示、...

    jquery瀑布流插件

    **jQuery瀑布流插件详解** 瀑布流布局,也称为Masonry布局,是一种常见的网页布局方式,主要用于图片展示或内容排列,使得页面在不同分辨率的设备上都能呈现出良好的视觉效果。这种布局方式的特点是元素可以自动...

    php+jquery4种瀑布流

    瀑布流布局,也被称为Masonry布局,是一种网页布局方式,常用于图片展示,它通过将内容元素(如图片)按照不等宽但等高的样式排列,形成类似瀑布的效果,逐个下落,使得页面看起来既美观又富有动态感。在本项目中,...

    jQuery手机端瀑布流布局代码.zip

    瀑布流布局的特点在于,内容元素可以以多列的形式呈现,随着页面滚动,新的内容会自动填充空白区域,形成一种类似瀑布的效果。 在实现过程中,jQuery手机端瀑布流布局主要涉及以下几个关键知识点: 1. **jQuery库*...

    简单的Masonry瀑布流jQuery图片网格布局插件

    这是一款简单实用的类似Masonry瀑布流的jQuery图片网格布局插件。该Masonry瀑布流布局简单易用,它通过imagesloaded来加载图片,并且可以非常方便的动态添加任意数量的图片到网格布局中。

    jQuery实现的瀑布流加载效果示例

    瀑布流布局是一种常见的网页设计样式,它模仿了自然瀑布中水流自上而下连续流动的效果。在网页上,瀑布流布局通常用于展示图片或内容,每个元素(如图片)会根据页面宽度自动调整并垂直对齐,形成多列布局,且每一列...

    简单的js实现瀑布流示例,相关技术jq

    简单的js实现瀑布流示例,相关技术jq。可借鉴。。。。

    ajax通过XML,JQ来实现的瀑布流效果

    瀑布流布局是一种常见的网页设计样式,它以一种不规则的方式排列元素,使页面看起来像瀑布一样自上而下流动。这种布局方式常用于图片展示、文章列表等场景,能够提供良好的用户体验,因为用户无需滚动过多就能看到新...

    jquery 瀑布流普通列表滑动加载

    瀑布流布局,也被称为Masonry布局,是一种网页布局方式,常用于图片展示或者商品列表,其特点是每一列的顶部对齐,而每列的高度则根据内容自动调整,呈现出类似瀑布倾泻的效果。在jQuery中实现瀑布流加载,通常结合...

    jQuery淡入淡出瀑布流效果

    结合这两个概念,"jQuery淡入淡出瀑布流效果"是指使用jQuery实现的一种动态展示瀑布流布局的图片或内容,通过淡入淡出的动画效果增加视觉吸引力。 要创建这样的效果,首先需要对jQuery有深入的理解,包括选择器、...

    瀑布流无限加载图片插件jq-waterfall

    "jq-waterfall"是一款基于jQuery的瀑布流插件,其核心目标是实现类似Pinterest的图片无限滚动加载效果。该插件响应式设计,能够根据用户设备的屏幕尺寸和方向自动调整布局,确保在各种设备上都能呈现出良好的显示...

    jQuery实现无限加载瀑布流特效

    瀑布流布局,也被称为Masonry布局,是一种网页元素排列方式,常见于图片展示或内容推荐网站,其特点是每个元素(如图片)根据其自身大小垂直对齐,形成类似瀑布倾泻的效果。在网页中实现这样的效果,jQuery是一个...

    jquery瀑布流效果响应式自适应手机电脑端jaliswall.js

    瀑布流布局,也被称为Masonry布局,是一种网页布局方式,常用于展示图片或者内容卡片,使得它们在页面上像瀑布一样自然下落,每行的元素数量不固定,随着浏览器窗口大小的变化而自适应调整。这种布局方式既美观又...

Global site tag (gtag.js) - Google Analytics