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

随机推荐

javascript强制转换详解
转换成数值 Number函数强制转换成数值数值->转换成原来的值字符串->如果可以解析为数值,则转换成数值:否则转换成NaN或者0 true->1,falSe->0 und ...
appium支持中文输入
Appium 1.3.3以上.java:capabilities增加下面两项:capabilities.setCapability("unicodeKeyboard", " ...
requestAnimationFrame在Chrome里的实现
requestAnimationFrame是HTML5游戏和动画必不可少的函数,相对于setTimeout或setInterval它有两个优势,一是它注册的回调函数与浏览器的渲染同步,不用担心Time ...
location.pathname；outline:medium；undefined不能加引号
1. location.pathname -- 返回URL的域名后的部分.例如 http://www.dreamdu.com/xhtml/ 返回/xhtml/ 2. 判断某个名称为undefined时 ...
jq实现禁止对密码框中的内容进行复制、剪切和粘贴操作
$(function () { $("input:password").on("copy cut paste", function (e) { return f ...
python 练习 28
ython pass是空语句,是为了保持程序结构的完整性. pass 不做任何事情,一般用做占位语句. Python 语言 pass 语句语法格式如下: pass 实例: #!/usr/bin/pyt ...
selenium+python笔记3
#!/usr/bin/env python # -*- coding: utf-8 -*- """ @desc:学习unittest的用法注意setUp/setUpCl ...
CentOS7+JDK8编译Hadoop2.6.4
1. 下载相关软件 apache-maven-3.3.1-bin.tar.gz protobuf-2.5.0.tar.gz hadoop-2.6.4-src.tar.gz 2.配置好jdk8环境(请看 ...
找不到 -lz解决方法
sudo apt-get install libghc-zlib-dev
父类中“this” 指向问题
“this.字段”如果出现在父类代码中,指的就是父类属性. “this.方法”不管出现在父类还是子类代码中,指的都是子类方法. “this.字段”如果出现在子类代码中,指的就是子类属性. 在程序的时候 ...

jQuery 动态添加瀑布流

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

随机推荐

热门专题