js 瀑布流

最新推荐文章于 2022-02-16 21:26:38 发布
最新推荐文章于 2022-02-16 21:26:38 发布
阅读量542 收藏
点赞数
分类专栏： jquery javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zz3hh/article/details/42006395
版权 
<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>瀑布流布局</title>
		<style type="text/css">
			body {
				margin: 0;
				font-family: 微软雅黑;
			}
			#flow-box {
				margin: 10px auto 0 auto;
				padding: 0;
				position: relative
			}
			#flow-box li {
				width: 190px;
				position: absolute;
				padding: 10px;
				border: solid 1px #efefef;
				list-style: none;
				opacity: 0;
				-moz-opacity: 0;
				filter: alpha(opacity=0);
				-webkit-transition: opacity 500ms ease-in-out;
				-moz-transition: opacity 500ms ease-in-out;
				-o-transition: opaicty 500ms ease-in-out;
				transition: opaicty 500ms ease-in-out;
			}
			#flow-box li img {
				width: 100%;
			}
			#flow-box li a {
				display: block;
				width: 100%;
				text-align: center;
				font-size: 14px;
				color: #333;
				line-height: 18px;
				margin-top: 10px;
				text-decoration: none;
			}
			.loadwrap {
				position: absolute;
				left: 0;
				width: 100%;
				text-align: center;
			}
		</style>
	</head>

	<body>
		<ul id="flow-box">
			<li>
				<img src="http://files.jb51.net/file_images/article/201211/960bda11tw1dnw504ga3vj.jpg" /><a href="javascript:;">图片标题1</a>
			</li>
			<li>
				<img src="http://files.jb51.net/file_images/article/201211/771f735ctw1dnw5gv6dmcj.jpg" /><a href="javascript:;">图片标题2</a>
			</li>
			<li>
				<img src="http://files.jb51.net/file_images/article/201211/5d5e9605gw1dnw4o6uk3gj.jpg" /><a href="javascript:;">图片标题3</a>
			</li>
			<li>
				<img src="http://files.jb51.net/file_images/article/201211/6d9cb0b8jw1dnw5m0y5yrj.jpg" /><a href="javascript:;">图片标题4</a>
			</li>
			<li>
				<img src="http://files.jb51.net/file_images/article/201211/62dae985gw1dnzc4mwvm5j.jpg" /><a href="javascript:;">图片标题5</a>
			</li>
			<li>
				<img src="http://files.jb51.net/file_images/article/201211/8d95fb4cgw1dnzec2c6cdj.jpg" /><a href="javascript:;">图片标题6</a>
			</li>
			<li>
				<img src="http://files.jb51.net/file_images/article/201211/872bccc8jw1dnzch2aqtkj.jpg" /><a href="javascript:;">图片标题7</a>
			</li>
			<li>
				<img src="http://files.jb51.net/file_images/article/201211/5b104465tw1dnzdlozp6tj.jpg" /><a href="javascript:;">图片标题8</a>
			</li>
			<li>
				<img src="http://files.jb51.net/file_images/article/201211/6de170f6jw1dnzl7jbzidj.jpg" /><a href="javascript:;">图片标题9</a>
			</li>
			<li>
				<img src="http://files.jb51.net/file_images/article/201211/6a93dbfbgw1dnzeiu1draj.jpg" /><a href="javascript:;">图片标题10</a>
			</li>
			<li>
				<img src="http://files.jb51.net/file_images/article/201211/6ea59a74jw1dnzm0wbf7vj.jpg" /><a href="javascript:;">图片标题11</a>
			</li>
			<li>
				<img src="http://files.jb51.net/file_images/article/201211/48bf076ejw1dnzexjhl6dj.jpg" /><a href="javascript:;">图片标题12</a>
			</li>
			<li>
				<img src="http://files.jb51.net/file_images/article/201211/6da7993fjw1dnvsnesrutj.jpg" /><a href="javascript:;">图片标题13</a>
			</li>
			<li>
				<img src="http://files.jb51.net/file_images/article/201211/75914d3fgw1dnzlgn33njj.jpg" /><a href="javascript:;">图片标题14</a>
			</li>
			<li>
				<img src="http://files.jb51.net/file_images/article/201211/6a8dea72gw1dnzlwnfju0j.jpg" /><a href="javascript:;">图片标题15</a>
			</li>
			<li>
				<img src="http://files.jb51.net/file_images/article/201211/696387aagw1dnzqd829yyj.jpg" /><a href="javascript:;">图片标题16</a>
			</li>
			<li>
				<img src="http://files.jb51.net/file_images/article/201211/6da7993fjw1dnvsnesrutj.jpg" /><a href="javascript:;">图片标题17</a>
			</li>
			<li>
				<img src="http://files.jb51.net/file_images/article/201211/6de170f6jw1dnzl7jbzidj.jpg" /><a href="javascript:;">图片标题18</a>
			</li>
			<li>
				<img src="http://files.jb51.net/file_images/article/201211/6ea59a74jw1dnzm0wbf7vj.jpg" /><a href="javascript:;">图片标题19</a>
			</li>
			<li>
				<img src="http://files.jb51.net/file_images/article/201211/696387aagw1dnzqd829yyj.jpg" /><a href="javascript:;">图片标题20</a>
			</li>
		</ul>
		<div id="loadimg" class="loadwrap">
			<img src="http://files.jb51.net/file_images/article/201211/200803131036175436.gif" />
		</div>
	</body>

	<script type="text/javascript">
		var data =[{"img":"http://files.jb51.net/file_images/article/201211/960bda11tw1dnw504ga3vj.jpg","title":"a"},
				{"img":"http://files.jb51.net/file_images/article/201211/771f735ctw1dnw5gv6dmcj.jpg","title":"a"},
				{"img":"http://files.jb51.net/file_images/article/201211/5d5e9605gw1dnw4o6uk3gj.jpg","title":"a"},
				{"img":"http://files.jb51.net/file_images/article/201211/6d9cb0b8jw1dnw5m0y5yrj.jpg","title":"a"},
				{"img":"http://files.jb51.net/file_images/article/201211/62dae985gw1dnzc4mwvm5j.jpg","title":"a"},
				{"img":"http://files.jb51.net/file_images/article/201211/8d95fb4cgw1dnzec2c6cdj.jpg","title":"a"},
				{"img":"http://files.jb51.net/file_images/article/201211/872bccc8jw1dnzch2aqtkj.jpg","title":"a"},
				{"img":"http://files.jb51.net/file_images/article/201211/5b104465tw1dnzdlozp6tj.jpg","title":"a"},
				{"img":"http://files.jb51.net/file_images/article/201211/6de170f6jw1dnzl7jbzidj.jpg","title":"a"},
				{"img":"http://files.jb51.net/file_images/article/201211/6a93dbfbgw1dnzeiu1draj.jpg","title":"a"},
				{"img":"http://files.jb51.net/file_images/article/201211/6ea59a74jw1dnzm0wbf7vj.jpg","title":"a"},
				{"img":"http://files.jb51.net/file_images/article/201211/48bf076ejw1dnzexjhl6dj.jpg","title":"a"},
				{"img":"http://files.jb51.net/file_images/article/201211/6da7993fjw1dnvsnesrutj.jpg","title":"a"},
				{"img":"http://files.jb51.net/file_images/article/201211/75914d3fgw1dnzlgn33njj.jpg","title":"a"},
				{"img":"http://files.jb51.net/file_images/article/201211/6a8dea72gw1dnzlwnfju0j.jpg","title":"a"},
				{"img":"http://files.jb51.net/file_images/article/201211/696387aagw1dnzqd829yyj.jpg","title":"a"}];
		function flow(mh, mv) { //参数mh和mv是定义数据块之间的间距，mh是水平距离，mv是垂直距离 
				var w = document.documentElement.offsetWidth; //计算页面宽度 
				var ul = document.getElementById("flow-box");
				var li = ul.getElementsByTagName("li");
				var iw = li[0].offsetWidth + mh; //计算数据块的宽度 
				var c = Math.floor(w / iw); //计算列数 
				ul.style.width = iw * c - mh + "px"; //设置ul的宽度至适合便可以利用css定义的margin把所有内容居中 

				var liLen = li.length;
				var lenArr = [];
				for (var i = 0; i < liLen; i++) { //遍历每一个数据块将高度记入数组 
					lenArr.push(li[i].offsetHeight);
				}

				var oArr = [];
				for (var i = 0; i < c; i++) { //把第一行排放好，并将每一列的高度记入数据oArr 
					li[i].style.top = "0";
					li[i].style.left = iw * i + "px";
					li[i].style.opacity = "1";
					li[i].style["-moz-opacity"] = "1";
					li[i].style["filter"] = "alpha(opacity=100)";
					oArr.push(lenArr[i]);
				}

				for (var i = c; i < liLen; i++) { //将其他数据块定位到最短的一列后面，然后再更新该列的高度 
					var x = _getMinKey(oArr); //获取最短的一列的索引值 
					li[i].style.top = oArr[x] + mv + "px";
					li[i].style.left = iw * x + "px";
					li[i].style.opacity = "1";
					li[i].style["-moz-opacity"] = "1";
					li[i].style["filter"] = "alpha(opacity=100)";
					oArr[x] = lenArr[i] + oArr[x] + mv; //更新该列的高度 
				}
				document.getElementById("loadimg").style.top = _getMaxValue(oArr) + 50 + "px"; //将loading移到下面 

				function scroll() { //滚动加载数据 
					var st = oArr[_getMinKey(oArr)];
					var scrollTop = document.documentElement.scrollTop > document.body.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
					if (scrollTop >= st - document.documentElement.clientHeight) {
						window.onscroll = null; //为防止重复执行，先清除事件 
//						_request(null, "GetList.php", function(data) { //当滚动到达最短的一列的距离时便发送ajax请求新的数据，然后执行回调函数 
							_addItem(data, function() { //追加数据 
								var liLenNew = li.length;
								for (var i = liLen; i < liLenNew; i++) {
									lenArr.push(li[i].offsetHeight);
								}
								for (var i = liLen; i < liLenNew; i++) {
									var x = _getMinKey(oArr);
									li[i].style.top = oArr[x] + 10 + "px";
									li[i].style.left = iw * x + "px";
									li[i].style.opacity = "1";
									li[i].style["-moz-opacity"] = "1";
									li[i].style["filter"] = "alpha(opacity=100)";
									oArr[x] = lenArr[i] + oArr[x] + 10;
								}
								document.getElementById("loadimg").style.top = _getMaxValue(oArr) + 50 + "px"; //loading向下移位 
								liLen = liLenNew;
								window.onscroll = scroll; //执行完成，恢愎onscroll事件 
							});
//						})
					}
				}
				window.onscroll = scroll;
			}
			//图片加载完成后执行 
		window.onload = function() {
			flow(10, 10)
		};
		 //改变窗口大小时重新布局 
		var re;
		window.onresize = function() {
				clearTimeout(re);
				re = setTimeout(function() {
					flow(10, 10);
				}, 200);
			}
			//追加项 

		function _addItem(arr, callback) {
				var _html = "";
				var a = 0;
				var l = arr.length;
				(function loadimg() {
					var img = new Image();
					img.onload = function() {
						a += 1;
						if (a == l) {
							for (var k in arr) {
								var img = new Image();
								img.src = arr[k].img;
								_html += '<li><img src="' + arr[k].img + '" /><a href="#">' + arr[k].title + '</a></li>';
							}
							_appendhtml(document.getElementById("flow-box"), _html);
							callback();
						} else {
							loadimg();
						}
					}
					img.src = arr[a].img;
				})()
			}
			//ajax请求 

		function _request(reqdata, url, callback) {
				var xmlhttp;
				if (window.XMLHttpRequest) {
					xmlhttp = new XMLHttpRequest();
				} else {
					xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
				}
				xmlhttp.onreadystatechange = function() {
					if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
						var data = eval("(" + xmlhttp.responseText + ")");
						callback(data);
					}
				}
				xmlhttp.open("POST", url);
				xmlhttp.setRequestHeader("Content-Type", "application/json; charset=utf-8");
				xmlhttp.send(reqdata);
			}
			//追加html 

		function _appendhtml(parent, child) {
				if (typeof(child) == "string") {
					var div = document.createElement("div");
					div.innerHTML = child;
					var frag = document.createDocumentFragment();
					(function() {
						if (div.firstChild) {
							frag.appendChild(div.firstChild);
							arguments.callee();
						} else {
							parent.appendChild(frag);
						}
					})();
				} else {
					parent.appendChild(child);
				}
			}
			//获取数字数组的最大值 

		function _getMaxValue(arr) {
				var a = arr[0];
				for (var k in arr) {
					if (arr[k] > a) {
						a = arr[k];
					}
				}
				return a;
			}
			//获取数字数组最小值的索引 

		function _getMinKey(arr) {
			var a = arr[0];
			var b = 0;
			for (var k in arr) {
				if (arr[k] < a) {
					a = arr[k];
					b = k;
				}
			}
			return b;
		}
	</script>

</html>

web前端-白小白
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
-Webkit- Transition
sunshine940326的博客
09-24 2676
在CSS3中这个属性的作用是使得变化不那么生硬，达到比较平和的过渡。而实际变化的属性是需要我们自己手动去添加变化. 这个属性可以分解成多个CSS属性： （1)-webkit-transition-timing-function 可以定义动画的变化时间曲线 -webkit-transition-timing-function: ease-out ,cubic-bezier(x1,y1,x2,y2
html的opacity标签,CSS属性参考 | opacity
weixin_42552315的博客
06-18 4268
CSS opacity 属性用于指定一个元素的透明度。换句话来说，opacity属性用于控制元素背后的背景的可见程度。opacity属性使用值来作为元素透明度的级别。数值的范围在0-1之间。透明度值为1是元素默认的透明度级别，它表示元素完全不透明。透明度为0表示元素完全透明。当一个元素的透明度数值越接近0时，它后面的背景就看得越清楚。当opacity属性应用在某个元素上时，是把这个元素(包括它的内...
原生JS瀑布流布局，无限加载
09-01
原生JS瀑布流布局，无限加载
CSS 3 Transition（变换）
u011283842的专栏
01-07 1402
如长度增加，能产生类似拉长的动画效果；颜色改变时，也可以利用Transition产生一种颜色渐变的效果。 浏览器支持情况 CSS Transition受到浏览器的广泛支持。 Chrome 2+(-webkit-transition) Firefox3.7+(-moz-transition) Safari 3.1+(-webkit-transition) Opera 10.
利用CSS Transition来实现动画效果
seraph021724的专栏
10-31 8835
今天在网上乱逛的时候发现了网站http://studioantwork.com/，其中菜单栏当鼠标悬浮时透明度会降低，一般来说，我们会使用jquery来实现这一过渡效果，不过在这里设计者使用了一种不同的方法，对于孤陋寡闻的我来说实在是太新奇了。 以下是作者的源码 /* fade */ #title { padding: 0px 0px 0px 0px; floa
JavaScript瀑布流的实现
qq_45799465的博客
02-16 2146
瀑布流的核心 1, 根据 ajax请求的响应体结果 动态渲染生成页面 请求地址 请求方式 参数键名 都是 后端程序定义的 前端 只能根据需求 定义 携带的具体的参数数据 响应体数据是后端程序返回的数据结果 只能获取数据结果 不能修改数据结果 可以根据 响应体数据结果 动态渲染生成页面内容 可以使用 三元运算符 给标签定义属性等 2, 瀑布流 再次 发起请求的判断依据 上卷高度 + 视窗窗口高度 + 预留高度 ...
JS瀑布流效果
03-20
原生js写的瀑布流效果
JavaScript瀑布流布局实现代码
10-19
主要为大家详细介绍了JavaScript瀑布流布局的实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
javascript瀑布流布局实现方法详解
10-22
主要介绍了javascript瀑布流布局实现方法,结合实例形式较为详细的分析了JavaScript实现瀑布流布局的样式与具体功能代码,需要的朋友可以参考下
JS实现瀑布流效果
12-28
本文实例为大家分享了JS实现瀑布流效果的具体代码，供大家参考，具体内容如下 话不多说，直接上代码。如下： CSS部分： <style> .cont{margin: 0 auto;position: relative;} .box{float: left;padding: 4px...
javascript 微信企业号APP应用URL转换成PC端可正常访问的URL
zz3hh的专栏
03-30 1549
时间过得飞快，准备写些东西的时候才发现自己快一年半没有写blog了,写这些东西只是为了记录下来自己走过的坑，为下次遇见同类的问题能够迅速解决，毕竟人脑有限，存储下来以备不时之需。 一：背景(功能需求)        首先网站后台开发为nodejs,微信企业号中创建APP应用可以创建多个，每个APP应用的回调的URL是不同的，每个APP应用中都有消息通知，现在需要PC端把各个应用的消息通知集中起
js 解决IE8 数组无IndexOf方法和 js Date兼容浏览器问题
zz3hh的专栏
12-08 1100
最近在做一个网站的日历签到控件，要比较两个数组里的数据并合并成一个数组，就想用IndexOf方法查找数据的位置合并数据，但是运行在IE8下数组没有IndexOf方法; /******解决IE8 数组无IndexOf方法*****/ if (!Array.prototype.indexOf) { Array.prototype.indexOf = function(elt /*, from
jq实现checkbox全选中以及获得选中的checkbox的值
zz3hh的专栏
02-26 1044
html代码 目录导航 大客户事业部 大客户营销中心 李阳 宋毅 刘能 赵四
js 实现菜单左右滚动显示
zz3hh的专栏
11-21 767
http://flytosky.qzone.qq.com *{font-family:"微软雅黑"; margin:0 auto; padding:0px;} .zj_nei_l{ width:1150px; height:130px; margin-left:25px;} .zj_nei_l li{ float:left; font-size:20px; color:#6f6f6f;
js 实现菜单上下显示
zz3hh的专栏
11-21 747
http://flytosky.qzone.qq.com *{font-family:"微软雅黑"; margin:0 auto; padding:0px;} .zj_nei_l{ width:1150px; height:130px; margin-left:25px;} .zj_nei_l li{font-size:20px; color:#6f6f6f; text-align:ce
js 自定义下拉选择框
zz3hh的专栏
08-18 730
statistics test .dropdiv{ width: 177px; height: 16px; overflow: hidden; float: left; font-size: 13px; font-family: "微软雅黑"; position: relative; padding: 5px; } .drpdown{ widt
js 新版自定义下拉选择框
zz3hh的专栏
08-26 693
statistics test .dropdiv{ width: 180px; height: 24px; overflow: hidden; float: left; font-size: 13px; font-family: "微软雅黑"; position: relative; padding: 0px 26px 0px 5px; border:
js 时间倒计时
zz3hh的专栏
08-21 675
时间倒计时 function dateCount(start,end){ if(new Date(start)< new Date(end)){ var start = new Date(start); var end = new Date(end); var time =end.valueOf()-start.valueOf(); var
js自定义倒计时
zz3hh的专栏
10-27 659
1、首先贴出美工设计的样式
js瀑布流
最新发布
06-01
这里是一个简单的 JavaScript 瀑布流实现的代码，可以供您参考： ```html <!DOCTYPE html> 瀑布流示例 #container { width: 800px; margin: 0 auto; } .item { width: 380px; margin: 10px; padding: ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值