瀑布流布局

最新推荐文章于 2022-04-15 15:15:00 发布

web_qdkf

最新推荐文章于 2022-04-15 15:15:00 发布

阅读量339

点赞数 1

分类专栏： jquery html

本文链接：https://blog.csdn.net/web_qdkf/article/details/50111741

版权

jquery 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

html

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body,
			ul {
				margin: 0;
				padding: 0;
			}
			
			ul,
			li {
				list-style: none;
			}
			
			.water_box {
				position: relative;
				margin-left: 90px;
			}
			
			.water_box .img {
				width: 360px;
			}
			
			.water_box img {
				width: 360px;
			}
			
			.test-banner {
				width: 100%;
				background: url(img/about-img.jpg) center bottom no-repeat \9;
				background: url(img/about-img.jpg) center bottom/cover no-repeat;
			}
		</style>
	</head>

	<body>
		<div class="water_box">
			<ul>
				<li class="img"><img class="loading" src="img/test.jpg" /></li>
				<li class="img"><img class="loading" src="img/test3.jpg" /></li>
				<li class="img"><img class="loading" src="img/test4.png" /></li>
				<li class="img"><img class="loading" src="img/5.jpg" /></li>
				<li class="img"><img class="loading" src="img/test3.jpg" /></li>
				<li class="img"><img class="loading" src="img/5.jpg" /></li>
				<li class="img"><img class="loading" src="img/test.jpg" /></li>
				<li class="img"><img class="loading" src="img/test.jpg" /></li>
				<li class="img"><img class="loading" src="img/test4.png" /></li>
				<li class="img"><img class="loading" src="img/test.jpg" /></li>
				<li class="img"><img class="loading" src="img/5.jpg" /></li>
				<li class="img"><img class="loading" src="img/test.jpg" /></li>
				<li class="img"><img class="loading" src="img/test3.jpg" /></li>
				<li class="img"><img class="loading" src="img/test.jpg" /></li>
				<li class="img"><img class="loading" src="img/test.jpg" /></li>
				<li class="img"><img class="loading" src="img/test4.png" /></li>
				<li class="img"><img class="loading" src="img/test.jpg" /></li>
				<li class="img"><img class="loading" src="img/5.jpg" /></li>
			</ul>
		</div>
		<script type="text/javascript" src="js/vendor/jquery-1.11.3.min.js"></script>
		<script type="text/javascript">
			(function(jQuery) {
				$.fn.Waterfall = function(setting) {
					return this.each(function() {
						var defaults = {
							width: 360,
							marginT: 5,
							marginL: 5,
							speed: 700,
							cn: 'li',
							delTime: 3000
						};
						var dataArr = [],
							boxArr = [],
							BoxLengthArr = [],
							ResaultArr = [];
						$self = $(this);
						$selfL = $self.offset().left;
						$selfT = $self.offset().top;
						var rowold, max = 0;
						var set = $.extend(defaults, setting);
						var checkMinI = function(arr) {
							var MinNum = arr[0];
							for (var i = 1, len = arr.length; i < len; i++) {
								MinNum = Math.min(MinNum, arr[i])
							};
							for (var i in arr) {
								if (arr[i] == MinNum) {
									return i
								}
							}
						};
						var checkMax = function(arr) {
							var maxNum = arr[0];
							for (var i = 1, len = arr.length; i < len; i++) {
								maxNum = Math.max(maxNum, arr[i])
							};
							for (var i in arr) {
								if (arr[i] == maxNum) {
									s = i;
									break
								}
							};
							this.i = s;
							this.max = maxNum;
							return this
						};
						var Sub = function(arr) {
							var sub = 0;
							for (var i in arr) {
								sub += arr[i]
							};
							return sub
						};
						var init = function() {
							var boxWidth = $self.width();
							if (boxWidth < set.width) return;
							var largeI;
							var row = Math.floor((boxWidth + set.marginL) / (set.width + set.marginL));
							rowold = row;
							dataArr = [];
							boxArr = [];
							BoxLengthArr = [];
							$self.find("." + set.cn).each(function(i) {
								dataArr[i] = $(this).height()
							});
							for (var i = 0; i < row; i++) {
								boxArr[i] = null;
								boxArr[i] = {};
								boxArr[i]['arr'] = [];
								boxArr[i]['key'] = []
							};
							for (var i = 0, len = dataArr.length; i < len; i++) {
								for (var j = 0; j < row; j++) {
									BoxLengthArr[j] = Sub(boxArr[j]['arr'])
								}
								num = checkMinI(BoxLengthArr);
								boxArr[num]['key'][boxArr[num]['key'].length] = i;
								boxArr[num]['arr'][boxArr[num]['arr'].length] = dataArr[i]
							};
							for (var i = 0, len = len; i < len; i++) {
								for (var j = 0; j < row; j++) {
									BoxLengthArr[j] = Sub(boxArr[j]['arr'])
								}
								max = checkMax(BoxLengthArr).max;
								largeI = checkMax(BoxLengthArr).i
							};
							var maxMarginT = boxArr[largeI]['key'].length * set.marginT;
							$self.height(max + maxMarginT);
							return boxArr
						};
						var setPosition = function(ARR) {
							for (var i in ARR) {
								for (var j in ARR[i].key) {
									var rowN = ARR[i].key[j];
									var topN = 0;
									for (var k = 0; k < j; k++) {
										topN = topN + ARR[i].arr[k]
									}
									$self.find("." + set.cn).eq(rowN).css({
										'left': i * (set.width + set.marginL),
										'top': topN + (j * set.marginT) + set.marginT
									}).fadeIn(set.speed)
								}
							}
						};
						var AnimateFn = function(ARR) {
							for (var i in ARR) {
								for (var j in ARR[i].key) {
									var rowN = ARR[i].key[j];
									var topN = 0;
									for (var k = 0; k < j; k++) {
										topN = topN + ARR[i].arr[k]
									}
									$self.find("." + set.cn).eq(rowN).stop().animate({
										'left': i * (set.width + set.marginL),
										'top': topN + (j * set.marginT) + set.marginT
									})
								}
							}
						};
						$self.find("." + set.cn).each(function(i) {
							var $div = $(this);
							$div.css('position', 'absolute')
						});
						setPosition(init());
						$(window).resize(function() {
							var boxWidth = $self.width();
							var row = Math.floor((boxWidth + set.marginL) / (set.width + set.marginL));
							if (rowold != row) {
								rowold = row;
								AnimateFn(init())
							}
						})
					})
				}
			})(jQuery);
			$(function() {
				$('.water_box').Waterfall({
					cn: 'img',
					width: 360,
					speed: 0,
					marginT: 16,
					marginL: 16,
					delTime: 0
				});
			})
		</script>

web_qdkf

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
瀑布流布局

body, ul { margin: 0; padding: 0; }ul, li { list-style: none; }.water_box { position: relative; margin-left: 90px; }.water_box .img { width: 360px; }.water_box img { width: 360px; }.test-b
复制链接

扫一扫