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 ...

随机推荐

mybatis generator
http://blog.csdn.net/sunny243788557/article/details/45166397 http://www.cnblogs.com/smileberry/p/414 ...
x^y=(x&~y)|(~x&y)证明
我见过最棒的证明是文氏图:(首先要知道二元布尔代数是集合的特殊情况,所以把X和Y当作两个集合,结论成立,那么在二元布尔代数里面也成立.)左边的圈是X,右边的圈是Y.如果是OR 也就是取或,中间的白色的 ...
sizeof和strlen()的区别
二者有本质上的区别从定义可以知道sizeof只是一个operator,而strlen()则是定义一个定义在<string.h>中的函数;所以sizeof(string)是在计算strin ...
c++ string 与 char 互转以及base64
c++ string 与 char 互转很简单如下 ] = {'A','B','C','D','E'}; printf("%s\n",bts); //char to string ...
【图形学】我理解的伽马校正（Gamma Correction）
http://blog.csdn.net/candycat1992/article/details/46228771/ 写在前面我相信几乎所有做图像处理方面的人都听过伽马校正(Gamma Corre ...
mongodb配置及简单示例
安装在官网下载安装 https://www.mongodb.com/ 配置我的电脑—>右键属性—>左边列表中的高级程序设置—>环境变量点击path 把你的mongodb文件路径 ...
hdu 1075 二分搜索
还是写一下,二分搜索好了这道题开数组比较坑... 二分,需要注意边界问题,例如:左闭右闭,左闭右开,否则查找不到or死循环先上AC代码 #include<iostream> #incl ...
AngularJS 中文资料+工具+库+Demo 大搜集
中文学习资料: 中文资料且成系统的就这么多,优酷上有个中文视频. http://www.cnblogs.com/lcllao/archive/2012/10/18/2728787.html 翻译的 ...
词法分析器--DFA（c++实现）
语言名为TINY 实例程序: begin var x,y:interger; x:=; read(x); then x:=x-y; x:=x+y; write(x); end TINY语言扫描程序的D ...
div中的字符换行
div中的字符换行转载自:http://blog.sina.com.cn/s/blog_6a79bc480100tizi.html 1.强制不换行,同时以省略号结尾. <div style ...

jQuery 动态添加瀑布流

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

随机推荐

热门专题