<!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 动态添加瀑布流的更多相关文章

  1. jQuery动态网格瀑布流插件Masonry

    Masonry是一款非常强大的jQuery动态网格布局插件,可以帮助开发人员快速开发瀑布流界面效果.和CSS中float的效果不太一样的地方在于,float先水平排列,然后再垂直排列,使用Masonr ...

  2. jQuery淡入淡出瀑布流效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. Jquery实现图片瀑布流思路-简单版

    目录 Jquery实现图片瀑布流思路-简单版 1.预备 2.开始 1.声明 2.主体 3.窗体大小改变事件 Jquery实现图片瀑布流思路-简单版 注意:本篇文章基于知道每张图片的实际尺寸的情况下 特 ...

  4. jQuery无限载入瀑布流 【转载】

    转载至 http://wuyuans.com/2013/08/jquery-masonry-infinite-scroll/ jQuery无限载入瀑布流 好久没更新日志了,一来我比较懒,二来最近也比较 ...

  5. 给Jquery动态添加的元素添加事件

    给Jquery动态添加的元素添加事件 来源:[http://wangqixia.diandian.com/post/2011-05-10/6597866] 我想很多人都会向我一样曾经 被新元素的事件绑 ...

  6. [转载]给Jquery动态添加的元素添加事件

    原文地址:给Jquery动态添加的元素添加事件作者:小飞侠 我想很多人都会向我一样曾经 被新元素的事件绑定困惑很久也就是在页面加载完成后给元素绑定了事件,但又新增加的元素上却没有绑定任何事件. js的 ...

  7. jquery 动态添加表格行

    jquery 动态添加表格行 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <h ...

  8. jQuery动态添加删除select项

    // 添加 function col_add() { var selObj = $("#mySelect"); var value="value"; var t ...

  9. jquery 动态添加和删除 ul li列表

    今天需要实现一个jquery动态添加和删除  ul li列表中的li行,自己简单的实现乐一个,分享一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...

随机推荐

  1. Python核心编程-闭包

    百度搜了一下闭包的概念:简而言之,闭包的作用就是在外部函数执行完并返回后,闭包使得收机制不会收回函数所占用的资源,因为内部函数的执行需要依赖外函数中的变量.这是对闭包作用的非常直白的描述,不专业也不严 ...

  2. java里的基本数据类型

    java里一共有八大数据类型 boolean(未定) char(2字节) byte(1字节) short(2字节) int(4字节) long(8字节) float(4字节) double(8字节), ...

  3. form in drupal

    qin_form_ajax_example_form($form, &$form_state)类似函数的参数永远都是一样的,最多把$form前面也加上& 当没有实现页面跳转时,$for ...

  4. VB6 GDI+ 入门教程[4] 文字绘制

    http://vistaswx.com/blog/article/category/tutorial/page/2 VB6 GDI+ 入门教程[4] 文字绘制 2009 年 6 月 18 日 7条评论 ...

  5. linux笔记：压缩解压命令gzip,gunzip,tar,zip,unzip,bzip2,bunzip2

    命令名称:gzip功能:压缩文件命令所在路径:/bin/gzip用法:gzip 文件压缩后文件格式:.gz其他:压缩后不保留原文件:只能压缩文件,不能压缩目录 命令名称:gunzip功能:解压.gz格 ...

  6. Java多线程基础：进程和线程之由来

    转载: Java多线程基础:进程和线程之由来 在前面,已经介绍了Java的基础知识,现在我们来讨论一点稍微难一点的问题:Java并发编程.当然,Java并发编程涉及到很多方面的内容,不是一朝一夕就能够 ...

  7. javascript 盒子模型

    oDiv.clientWidth--->width+左右padding oDiv.clientHeight--->height+上下padding oDiv.clientTop---> ...

  8. mysql 各种运算对于null值的处理

    1.A,B,C作为列名时,任意一项为null 则A+B+C为null; 2.count对于null值处理; count(*)包含null项:count(具体列名)忽略null项;count(null) ...

  9. C#引用Office.word出错的解决办法-无法嵌入互操作类型“Microsoft.Office.Interop.Word.ApplicationClass” 【转】

    本文章转自 suchso 1.系统找不到 Microsoft.Office.Interop.Word" "Could not load file or assembly 'Micr ...

  10. 项目文件包含 ToolsVersion="12.0" 设置，但此工具集未知或缺失。

    项目属性(Alt+F7),再点常规,常规中有个平台工作集,把V120改成V110或者v100,然后就能正常运行了.