jQuery 动态添加瀑布流

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<style>

			body,

			html {

				margin: 0;

				padding: 0;

			}

			.box {

				float: left;

				width: 240px;

				padding: 10px;

				box-shadow: 0 0 5px gray;

				border: solid 1px gray;

			}

			img {

				width: 100%;

			}

		</style>

		<script src="../jquery-2.2.4.min.js"></script>

		<script>

			$(window).load(function() {

				locationImg();

			})

			$(window).scroll(function() {

					if (slideToAdd()) {

                         var data = {"data":[{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},

                         {"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"},{"src":"7.jpg"},

                         {"src":"8.jpg"},{"src":"9.jpg"}]};

                                      	console.log(data);

                         addElement(data.data);

                         locationImg();

					}

				})

				//窗口变化

			$(window).resize(function() {

				locationImg();

			})

             function addElement(data){

             	$(data).each(function(index,value){

             		//动态添加元素

             		var box = $("<div>").addClass('box').appendTo('.containner');

             		var src = "../../测试/"+value.src;

             		console.log(src);

             		$('<img>').attr('src',src).appendTo(box);

             	})

             }

             /*ps:获取某个元素距顶部位置：$('.box').last.get(0).offsetTop   get(0)获取指定index的dom元素*/

			function slideToAdd() {

				var lastBoxMiddleHeight =  $(document).height() - $('.box').last().height() / 2;

				lastBoxMiddleHeight = Math.floor(lastBoxMiddleHeight);

				//滚动距离+ 文档可视高度 > 文档最后一张图片的一半

				var scrollHeight = $(document).scrollTop() + $(window).height();

//				console.log("lastheight:" + lastBoxMiddleHeight);

//				console.log("scrollHeight:" + scrollHeight);

				return (scrollHeight > lastBoxMiddleHeight);

			}

			function locationImg() {

				//获取所有的box

				var box = $('.box');

				var heghtArray = [];

				//计算一行可容纳多少张图

				var imgNum = $(window).outerWidth(true) / box.eq(0).outerWidth(true);

				imgNum = Math.floor(imgNum);

				console.log(imgNum);

				//迭代排图

				box.each(function(index, value) {

					var thisValue = $(value);

					//找到第一行所有高度

					if (index < imgNum) {

						var height = box.eq(index).outerHeight(true);

						heghtArray[index] = height;

						//屏幕变化时，设置回float

						thisValue.css({

							'position': "static",

							'float': 'left',

						});

					} else {

						//找到最短高度

						var miniHeight = Math.min.apply(null, heghtArray);

						var indexOfMini = heghtArray.indexOf(miniHeight);

						//计算左边距离

						var left = indexOfMini * box.eq(0).outerWidth(true);

						//更改最短高度，这样下一个元素找第二高度

						heghtArray[indexOfMini] = miniHeight + thisValue.outerHeight(true);

						//设置绝对布局

						thisValue.css({

							'position': "absolute",

							'top': miniHeight,

							'left': left,

						})

					}

				})

			}

		</script>

	</head>

	<body>

		<div class="containner">

			<div class="box">

				<img src="../../测试/1.jpg" />

			</div>

			<div class="box">

				<img src="../../测试/2.jpg" />

			</div>

			<div class="box">

				<img src="../../测试/3.jpg" />

			</div>

			<div class="box">

				<img src="../../测试/4.jpg" />

			</div>

			<div class="box">

				<img src="../../测试/5.jpg" />

			</div>

			<div class="box">

				<img src="../../测试/6.jpg" />

			</div>

			<div class="box">

				<img src="../../测试/7.jpg" />

			</div>

			<div class="box">

				<img src="../../测试/8.jpg" />

			</div>

			<div class="box">

				<img src="../../测试/9.jpg" />

			</div>

			<div class="box">

				<img src="../../测试/1.jpg" />

			</div>

			<div class="box">

				<img src="../../测试/2.jpg" />

			</div>

			<div class="box">

				<img src="../../测试/3.jpg" />

			</div>

			<div class="box">

				<img src="../../测试/4.jpg" />

			</div>

			<div class="box">

				<img src="../../测试/5.jpg" />

			</div>

			<div class="box">

				<img src="../../测试/6.jpg" />

			</div>

			<div class="box">

				<img src="../../测试/7.jpg" />

			</div>

			<div class="box">

				<img src="../../测试/8.jpg" />

			</div>

			<div class="box">

				<img src="../../测试/9.jpg" />

			</div>

		</div>

	</body>

</html>

jQuery 动态添加瀑布流的更多相关文章

jQuery动态网格瀑布流插件Masonry
Masonry是一款非常强大的jQuery动态网格布局插件,可以帮助开发人员快速开发瀑布流界面效果.和CSS中float的效果不太一样的地方在于,float先水平排列,然后再垂直排列,使用Masonr ...
jQuery淡入淡出瀑布流效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
Jquery实现图片瀑布流思路-简单版
目录 Jquery实现图片瀑布流思路-简单版 1.预备 2.开始 1.声明 2.主体 3.窗体大小改变事件 Jquery实现图片瀑布流思路-简单版注意:本篇文章基于知道每张图片的实际尺寸的情况下特 ...
jQuery无限载入瀑布流【转载】
转载至 http://wuyuans.com/2013/08/jquery-masonry-infinite-scroll/ jQuery无限载入瀑布流好久没更新日志了,一来我比较懒,二来最近也比较 ...
给Jquery动态添加的元素添加事件
给Jquery动态添加的元素添加事件来源:[http://wangqixia.diandian.com/post/2011-05-10/6597866] 我想很多人都会向我一样曾经被新元素的事件绑 ...
[转载]给Jquery动态添加的元素添加事件
原文地址:给Jquery动态添加的元素添加事件作者:小飞侠我想很多人都会向我一样曾经被新元素的事件绑定困惑很久也就是在页面加载完成后给元素绑定了事件,但又新增加的元素上却没有绑定任何事件. js的 ...
jquery 动态添加表格行
jquery 动态添加表格行 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <h ...
jQuery动态添加删除select项
// 添加 function col_add() { var selObj = $("#mySelect"); var value="value"; var t ...
jquery 动态添加和删除 ul li列表
今天需要实现一个jquery动态添加和删除 ul li列表中的li行,自己简单的实现乐一个,分享一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...

随机推荐

用ildasm/ilasm修改IL代码
原文地址:http://www.cnblogs.com/dudu/archive/2011/05/17/ildasm_ilasm_il.html 在开发中遇到这样一个场景,需要修改一个dll文件(.N ...
poj----1330Nearest Common Ancestors（简单LCA)
题目连接 http://poj.org/problem?id=1330 就是构建一棵树,然后问你两个节点之间最近的公共父节点是谁? 代码: /*Source Code Problem: 1330 U ...
CF---（452）A. Eevee
A. Eevee time limit per test 1 second memory limit per test 256 megabytes input standard input outpu ...
Java之线程———GUI线程（包含打字游戏和计时器俩个GUI实列）
当java程序包含图形用户界面(GUI)时,Java虚拟机在运行应用程序时会自动启动更多的线程,其中有两个重要的线程:AWT-EventQuecue 和 AWT-Windows. AWT-EventQ ...
你不知道的JavaScript--数组进阶全掌握
转载 http://blog.csdn.net/i10630226/article/details/49764537 在程序语言中数组的重要性不言而喻,JavaScript中数组也是最常使用的对象之一 ...
soapUI快速入门（测试一个登录接口）
1.打开soapUI. 2.新建一个项目,实例如下: 点击ok后在soapUI界面左侧会显示出此项目,如图: 2.创建测试用例: a.新建用例组,选择此项目右键,新建一个用例组,如下图: 用例组创建好 ...
python 循环设计
for循环 1.range()用法 for循环后的in跟随一个序列的画,循环每次使用的序列元素而不是序列的下标例:s='abcdefg' for i in range(0,len(s),3): pr ...
在jsp页面中实现格式化数字，百分比，货币
当时的要求是在jsp页面中计算百分比实现方法 1.引入Jstl的fmt指令 <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" ...
OpenGL基础图形编程
一.OpenGL与3D图形世界1.1.OpenGL使人们进入三维图形世界我们生活在一个充满三维物体的三维世界中,为了使计算机能精确地再现这些物体,我们必须能在三维空间描绘这些物体.我们又生活在一个充 ...
Extjs 视频教程
---恢复内容开始--- 网易云课堂 <尚学堂_Ext视频教程> login.html <html> <head> <meta http-equiv=&quo ...

jQuery 动态添加瀑布流

jQuery 动态添加瀑布流的更多相关文章

随机推荐

热门专题