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

随机推荐

【c++】读写txt
#include<iostrea> #include<fstream> int main() { ofstream fout;// 创建一个ofstream对象 fout.op ...
jsp 颜色和表格控制
表格控制: table{table-layout:fixed; word-wrap:break-word; word-break:break-all;} 颜色列表:
shader学习路线
http://www.jianshu.com/p/7b9498e58659 http://blog.csdn.net/candycat1992/article/details/37882765
ASP.NET Core文档中Work with Data章节的翻译目录
作为初学者看了相关的教程,遇到的问题有: 1. 教程不是针对初学者,往往在某一方面教的较深,但并不系统,不适合初学者: 2. 虽然翻译的很顺畅,但是谈了自己较多的开发体会,初学者看着困难,尤其是TOM ...
垂直居中，水平居中html例子
<!DOCTYPE html> <html lang="en"> <head> <title>Vertical Centering ...
container 的背后
如果要看laravel的单个功能的源代码,首先去找对应得ServiceProvider,例如加密功能hash,则按一下步骤查看源代码: HashServiceProvider.php(主要是看regi ...
WinForm应用程序之注册模块的设计与实现
Posted on 2012-11-13 10:21 星星之火116 阅读(3260) 评论(4) 编辑收藏我们在安装一些桌面应用程序的时候,往往在会有提示当前用户使用的是试用版,要进行注册.刚好 ...
js--题目二
//如何获取下面代码所有元素. <form> <input name="" type="text" /> <input name= ...
MASS批量维护
T-CODE: MASS 批量更改MASS_CHARVAL 特征的批量维护MASS_EINE 信息记录的成批维护MASS_EKKO 采购订单的成批维护MASS_MARC 后勤/配送的成批维护MASS_ ...
dw添加emmet
1.emmet下载Emmet.zxp 2.怎么在dw中设置(命令->emmet->Expand Abbreviation)中查看使用emmet的快捷键,如果跟别人快捷键重合了 3.编辑-& ...

jQuery 动态添加瀑布流

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

随机推荐

热门专题