js实现瀑布流布局

我个人不太喜欢这种布局、但需求还是有的、只能实现。

查阅了资料找到两种方式:

第一种:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>瀑布流布局</title>
		<style type="text/css">
			#grid {
				position: relative;
			}
 			.item {
				position: absolute;
				left: 0;
				top: 0;
				width: 280px;
				height: auto;
				overflow: hidden;
				padding: 15px;
				border: 1px solid #ededed;
			}
			.item>img{width: 100%;}
		</style>
	</head>
	<body>
		<div id="grid">
			<div class="item">
				<img src="img/img1.jpg" alt="图片丢失">
			</div>
			<div class="item">
				<img src="img/img2.jpg" alt="图片丢失">
			</div>
			<div class="item">
				<img src="img/img3.jpg" alt="图片丢失">
			</div>
			<div class="item">
				<img src="img/img4.jpg" alt="图片丢失">
			</div>
			<div class="item">
				<img src="img/img1.jpg" alt="图片丢失">
			</div>
			<div class="item">
				<img src="img/img2.jpg" alt="图片丢失">
			</div>
			<div class="item">
				<img src="img/img1.jpg" alt="图片丢失">
			</div>
			<div class="item">
				<img src="img/img2.jpg" alt="图片丢失">
			</div>
			<div class="item">
				<img src="img/img3.jpg" alt="图片丢失">
			</div>
			<div class="item">
				<img src="img/img4.jpg" alt="图片丢失">
			</div>
			<div class="item">
				<img src="img/img5.jpg" alt="图片丢失">
			</div>
			<div class="item">
				<img src="img/img3.jpg" alt="图片丢失">
			</div>
			<div class="item">
				<img src="img/img4.jpg" alt="图片丢失">
			</div>
			<div class="item">
				<img src="img/img1.jpg" alt="图片丢失">
			</div>
			<div class="item">
				<img src="img/img2.jpg" alt="图片丢失">
			</div>
			<div class="item">
				<img src="img/img3.jpg" alt="图片丢失">
			</div>
			<div class="item">
				<img src="img/img4.jpg" alt="图片丢失">
			</div>
			<div class="item">
				<img src="img/img5.jpg" alt="图片丢失">
			</div>
			<div class="item">
				<img src="img/img5.jpg" alt="图片丢失">
			</div>
			<div class="item">
				<img src="img/img5.jpg" alt="图片丢失">
			</div>
		</div>
		<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
		<script type="text/javascript">
			$(function() {
				function itemWaterfull() {
					var margin = 15; //每个item的外边距,因人需求而定
					var items = $(".item"); //每个item的统一类名
					var item_width = items[0].offsetWidth + margin; //取区块的实际宽度
					$("#grid").css("padding", "0"); //容器的起始内边距先设为0,按之后一行item的宽度再来设,保证所有item的居中
					var container_width = $("#grid")[0].offsetWidth; //获取容器宽度
					var n = parseInt(container_width / item_width); //一行所允许放置的item个数
					var container_padding = (container_width - (n * item_width)) / 2; //一行宽度在容器中所剩余的宽度,设为容器的左右内边距
					$("#grid").css("padding", "0 " + container_padding + "px");
					//寻找数组最小高度的下标
					function findMinIndex(arr) {
						var len = arr.length,
							min = 999999,
							index = -1;
						for (var i = 0; i < len; i++) {
							if (min > arr[i]) {
								min = arr[i];
								index = i;
							}
						}
						return index;
					}
					//放置item
					function putItem() {
						var items_height = []; //每个item的高度
						var len = items.length; //获取item的个数
						for (var i = 0; i < len; i++) {
							var item_height = items[i].offsetHeight; //获取每个item的高度
							//放置在第一行的item
							if (i < n) {
								items_height[i] = item_height; //高度数组更新
								items.eq(i).css("top", 0);
								items.eq(i).css("left", i * item_width);

							} else { //放置在其他行的item        
								var min_index = findMinIndex(items_height); //寻找最小高度
								if (min_index == -1) {
									console.log("高度计算出现错误");
									return;
								}
								items.eq(i).css("top", items_height[min_index] + margin);
								items.eq(i).css("left", min_index * item_width);
								items_height[min_index] += item_height + margin; //高度数组更新
							}
						}

						var max_height = Math.max.apply(null, items_height);
						$("#grid").css("height", max_height); //最后更新容器高度
					}

					putItem();
				}
				itemWaterfull();
				window.onresize = function() {
					itemWaterfull();
				}; //在窗口大小改变后,item重新放置
			});
		</script>
	</body>
</html>

第二种:BlocksIt.js

<!DOCTYPE html>
<html>
	<head>
		<title>BlocksIt.js</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<link rel="stylesheet" type="text/css" href="css/stauy.css" />
		<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
		<script src="js/blocksit.min.js" type="text/javascript" charset="utf-8"></script>
		<script>
			$(document).ready(function() {
				$(window).load(function() {
					$('#container').BlocksIt({
						numOfCol: 3, //列数
						offsetX: 5, //x轴间距
						offsetY: 5 //y轴间距
					});
				});
			});
		</script>
	</head>
	<body>
		<section id="wrapper">
			<hgroup>
				<h2>BlocksIt.js Demonstration 2</h2>
				<h3>Pinterest Dynamic Grid Layout with CSS3 Transitions (RESIZE)</h3>
			</hgroup>
			<div id="container">
				<div class="grid">
					<div class="imgholder">
						<img src="img/img1.jpg" alt="...">
					</div>
					<strong>Sunset Lake</strong>
					<p>A peaceful sunset view...</p>
					<div class="meta">by j osborn</div>
				</div>
				<div class="grid">
					<div class="imgholder">
						<img src="img/img2.jpg" alt="...">
					</div>
					<strong>Bridge to Heaven</strong>
					<p>Where is the bridge lead to?</p>
					<div class="meta">by SigitEko</div>
				</div>
				<div class="grid">
					<div class="imgholder">
						<img src="img/img3.jpg" alt="...">
					</div>
					<strong>Autumn</strong>
					<p>The fall of the tree...</p>
					<div class="meta">by Lars van de Goor</div>
				</div>
				<div class="grid">
					<div class="imgholder">
						<img src="img/img4.jpg" alt="...">
					</div>
					<strong>Winter Whisper</strong>
					<p>Winter feel...</p>
					<div class="meta">by Andrea Andrade</div>
				</div>
				<div class="grid">
					<div class="imgholder">
						<img src="img/img5.jpg" alt="...">
					</div>
					<strong>Light</strong>
					<p>The only shinning light...</p>
					<div class="meta">by Lars van de Goor</div>
				</div>
				<div class="grid">
					<div class="imgholder">
						<img src="img/img3.jpg" alt="...">
					</div>
					<strong>Rooster's Ranch</strong>
					<p>Rooster's ranch landscape...</p>
					<div class="meta">by Andrea Andrade</div>
				</div>
				<div class="grid">
					<div class="imgholder">
						<img src="img/img1.jpg" alt="...">
					</div>
					<strong>Autumn Light</strong>
					<p>Sun shinning into forest...</p>
					<div class="meta">by Lars van de Goor</div>
				</div>
				<div class="grid">
					<div class="imgholder">
						<img src="img/img5.jpg" alt="...">
					</div>
					<strong>Yellow cloudy</strong>
					<p>It is yellow cloudy...</p>
					<div class="meta">by Zsolt Zsigmond</div>
				</div>
				<div class="grid">
					<div class="imgholder">
						<img src="img/img3.jpg" alt="...">
					</div>
					<strong>Herringfleet Mill</strong>
					<p>Just a herringfleet mill...</p>
					<div class="meta">by Ian Flindt</div>
				</div>
				<div class="grid">
					<div class="imgholder">
						<img src="img/img1.jpg" alt="...">
					</div>
					<strong>Battle Field</strong>
					<p>Battle Field for you...</p>
					<div class="meta">by Andrea Andrade</div>
				</div>
				<div class="grid">
					<div class="imgholder">
						<img src="img/img2.jpg" alt="...">
					</div>
					<strong>Sundays Sunset</strong>
					<p>Beach view sunset...</p>
					<div class="meta">by Robert Strachan</div>
				</div>
				<div class="grid">
					<div class="imgholder">
						<img src="img/img4.jpg" alt="...">
					</div>
					<strong>Sun Flower</strong>
					<p>Good Morning Sun flower...</p>
					<div class="meta">by Zsolt Zsigmond</div>
				</div>
				<div class="grid">
					<div class="imgholder">
						<img src="img/img5.jpg" alt="...">
					</div>
					<strong>Beach</strong>
					<p>Something on beach...</p>
					<div class="meta">by unknown</div>
				</div>
				<div class="grid">
					<div class="imgholder">
						<img src="img/img1.jpg" alt="...">
					</div>
					<strong>Flowers</strong>
					<p>Hello flowers...</p>
					<div class="meta">by R A Stanley</div>
				</div>
				<div class="grid">
					<div class="imgholder">
						<img src="img/img2.jpg" alt="...">
					</div>
					<strong>Alone</strong>
					<p>Lonely plant...</p>
					<div class="meta">by Zsolt Zsigmond</div>
				</div>
			</div>
		</section>
	</body>
</html>

stauy.css代码

body {
	margin: 0;
	padding: 0;
	color: #333;
	font-family: Cambria, Georgia, serif;
	font-size: 15px;
	overflow-x: hidden;
}
 
header, section, footer, hgroup {
	display: block;
}
 
a {
	color: #35BFFF;
	text-decoration: none;
}
 
a:hover, a:active {
	color: #91DCFF;
}
 
 
#backlinks {
	float: right;
	padding: 0 20px;
	line-height: 22px;
	font-weight: bold;
	font-size: 13px;
}
 
#backlinks a {
	text-align: right;
	display: block;
}
 
/* clearfix */
.clearfix {
	clear: both;
}
 
/* wrapper css */
#wrapper {
	margin-top: 70px;
	width: 100%;
}
 
#wrapper hgroup {
	text-align: center;
}
 
#wrapper h2 {
	margin: 5px 0;
	color: #FF6D99;
	text-shadow: 1px 1px 2px #A50031;
	font-size: 33px;
	font-family: Arial Narrow, Arial, sans-serif;
}
 
#wrapper h3 {
	font-style: italic;
	font-weight: normal;
	font-size: 18px;
	text-shadow: 1px 1px 0 #fff;
	color: #888;
	margin: 5px 0;
}
 
#container {
	position: relative;
	width: 100%;
	margin: 0 auto 25px;
	padding-bottom: 10px;
}
 
.grid {
	width: 188px;
	min-height: 100px;
	padding: 15px;
	background: #fff;
	margin: 8px;
	font-size: 12px;
	float: left;
	box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4);
	-moz-box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4);
	-webkit-box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4);
	-webkit-transition: top 1s ease, left 1s ease;
	-moz-transition: top 1s ease, left 1s ease;
	-o-transition: top 1s ease, left 1s ease;
	-ms-transition: top 1s ease, left 1s ease;
}
 .grid>div{text-align: center;}
.grid strong {
	border-bottom: 1px solid #ccc;
	margin: 10px 0;
	display: block;
	padding: 0 0 5px;
	font-size: 17px;
}
 
.grid .meta {
	text-align: right;
	color: #777;
	font-style: italic;
}
 
.grid .imgholder img {
	max-width:100%;
	background: #ccc;
	display: inline-block;
}
 
@media screen and (max-width : 1240px) {
	body {
		overflow: auto;
	}
}
 
@media screen and (max-width : 900px) {
	#backlinks {
		float: none;
		clear: both;
	}
	#backlinks a {
		display: inline-block;
		padding-right: 20px;
	}
	#wrapper {
		margin-top: 90px;
	}
}

BlocksIt.js 代码

(function(a) {
	var b = {
		numOfCol: 5,
		offsetX: 5,
		offsetY: 5,
		blockElement: "div"
	};
	var c, d;
	var e = [];
	if (!Array.prototype.indexOf) {
		Array.prototype.indexOf = function(a) {
			var b = this.length >>> 0;
			var c = Number(arguments[1]) || 0;
			c = c < 0 ? Math.ceil(c) : Math.floor(c);
			if (c < 0) c += b;
			for (; c < b; c++) {
				if (c in this && this[c] === a) return c
			}
			return -1
		}
	}
	var f = function() {
		e = [];
		for (var a = 0; a < b.numOfCol; a++) {
			g("empty-" + a, a, 0, 1, -b.offsetY)
		}
	};
	var g = function(a, c, d, f, g) {
		for (var h = 0; h < f; h++) {
			var i = new Object;
			i.x = c + h;
			i.size = f;
			i.endY = d + g + b.offsetY * 2;
			e.push(i)
		}
	};
	var h = function(a, b) {
		for (var c = 0; c < b; c++) {
			var d = i(a + c, "x");
			e.splice(d, 1)
		}
	};
	var i = function(a, b) {
		for (var c = 0; c < e.length; c++) {
			var d = e[c];
			if (b == "x" && d.x == a) {
				return c
			} else if (b == "endY" && d.endY == a) {
				return c
			}
		}
	};
	var j = function(a, b) {
		var c = [];
		for (var d = 0; d < b; d++) {
			c.push(e[i(a + d, "x")].endY)
		}
		var f = Math.min.apply(Math, c);
		var g = Math.max.apply(Math, c);
		return [f, g, c.indexOf(f)]
	};
	var k = function(a) {
		if (a > 1) {
			var b = e.length - a;
			var c = false;
			var d, f;
			for (var g = 0; g < e.length; g++) {
				var h = e[g];
				var i = h.x;
				if (i >= 0 && i <= b) {
					var k = j(i, a);
					if (!c) {
						c = true;
						d = k;
						f = i
					} else {
						if (k[1] < d[1]) {
							d = k;
							f = i
						}
					}
				}
			}
			return [f, d[1]]
		} else {
			d = j(0, e.length);
			return [d[2], d[0]]
		}
	};
	var l = function(a, c) {
		if (!a.data("size") || a.data("size") < 0) {
			a.data("size", 1)
		} else if (a.data("size") > b.numOfCol) {
			a.data("size", b.numOfCol)
		}
		var e = k(a.data("size"));
		var f = d * a.data("size") - (a.outerWidth() - a.width());
		a.css({
			width: f - b.offsetX * 2,
			left: e[0] * d,
			top: e[1],
			position: "absolute"
		});
		var i = a.outerHeight();
		h(e[0], a.data("size"));
		g(a.attr("id"), e[0], e[1], a.data("size"), i)
	};
	a.fn.BlocksIt = function(g) {
		if (g && typeof g === "object") {
			a.extend(b, g)
		}
		c = a(this);
		d = c.width() / b.numOfCol;
		f();
		c.children(b.blockElement).each(function(b) {
			l(a(this), b)
		});
		var h = j(0, e.length);
		c.height(h[1] + b.offsetY);
		return this
	}
})(jQuery)

参考地址:https://www.cnblogs.com/ainyi/p/8766281.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值