瀑布流快速构建 Masonry

celeronz1条评论 877 次浏览

瀑布流

瀑布流,又称瀑布流式布局。是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest,逐渐在国内流行开来。国内大多数清新站基本为这类风格。

Masonry.js非常爽的瀑布流构建。

Masonry的使用非常简单 若是配上bootstrap真的是特别棒

点击查看Demo演示

首先 引入masonryjs

<script src="https://npmcdn.com/masonry-layout@4.1/dist/masonry.pkgd.min.js"></script>

然后 DOM

<div class="grid">

<div class="grid-item">...</div>


<div class="grid-item grid-item--width2">...</div>


<div class="grid-item">...</div>

  ...
</div>

加上一点点CSS

.grid-item { width: 200px; }
.grid-item--width2 { width: 400px; }

最后借助Jquery完成初始化

$('.grid').masonry({
  // options
  itemSelector: '.grid-item',
  columnWidth: 200
});

搭配bootstarp的例子

点击这里从GIT获取最新版代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="keywords" content="平铺,壁纸,timekey,平铺时间" />
		<meta name="description" content="平铺时间————分享乐趣" />
		<title>平铺时间-Timekey</title>
		<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
		<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
		<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
		<script src="https://npmcdn.com/masonry-layout@4.1/dist/masonry.pkgd.min.js"></script>
		<style>
			body {
				background-image: url(http://source.timekey.top/first_bg.jpg);
				font-family: "microsoft yahei"
			}
			
			.img-list img {
				width: 100%;
			}
			
			.img-span {
				position: relative;
				background-color: #e7e7e7;
				line-height: 32px;
				padding-left: 10px;
				border-radius: 5%;
				color: #777;
			}
			
			.img-span .user {}
			
			.img-span .like {
				position: absolute;
				right: 110px;
			}
			
			.img-span .time {
				position: absolute;
				right: 5px;
			}
			
			.list-view {
				margin-top: 10px;
			}
			
			.footer {
				background-color: #E7E7E7;
			}
		</style>
	</head>

	<body>
		<header>
			<nav class="navbar navbar-default">
				<div class="container-fluid">
					<!-- Brand and toggle get grouped for better mobile display -->
					<div class="navbar-header">
						<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
						<a class="navbar-brand" href="#">Brand</a>
					</div>

					<!-- Collect the nav links, forms, and other content for toggling -->
					<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
						<ul class="nav navbar-nav">
							<li class="active">
								<a href="#">Link <span class="sr-only">(current)</span></a>
							</li>
							<li>
								<a href="#">Link</a>
							</li>

						</ul>

						<ul class="nav navbar-nav navbar-right">
							<li>
								<a href="#">登录</a>
							</li>
							<li>
								<a href="#">注册</a>
							</li>

						</ul>
					</div>
					<!-- /.navbar-collapse -->
				</div>
				<!-- /.container-fluid -->
			</nav>

		</header>

		<section class="container">
			<div class="row text-center ">
				<h3>平铺时间</h3>
				<h4>分享乐趣</h4>
			</div>
		</section>
		<section class="container">
			<div class="row grid">
				<div class="grid-sizer col-lg-3 col-md-3 col-sm-6 col-xs-10"></div>
				<div class="grid-item list-view col-lg-3 col-md-3 col-sm-6 col-xs-10">
					<div class="img-list">
						<img src="http://source.timekey.top/list-1.jpg" />
						<div class="img-span">
							<span class="user"><i class="glyphicon glyphicon-user"></i>  Atom</span>
							<span class="like"><i class="glyphicon glyphicon-heart"></i></span>
							<span class="time"><i class="glyphicon glyphicon-time"></i>2016-08-04</span>
						</div>
					</div>
				</div>
				<div class="grid-item list-view col-lg-3 col-md-3 col-sm-6 col-xs-10">
					<div class="img-list">
						<img src="http://source.timekey.top/list-2.jpg" />
						<div class="img-span">
							<span class="user"><i class="glyphicon glyphicon-user"></i>  Atom</span>
							<span class="like"><i class="glyphicon glyphicon-heart"></i></span>
							<span class="time"><i class="glyphicon glyphicon-time"></i>2016-08-04</span>
						</div>
					</div>
				</div>
				<div class="grid-item list-view col-lg-3 col-md-3 col-sm-6 col-xs-10">
					<div class="img-list">
						<img src="http://source.timekey.top/list-3.jpg" />
						<div class="img-span">
							<span class="user"><i class="glyphicon glyphicon-user"></i>  Atom</span>
							<span class="like"><i class="glyphicon glyphicon-heart"></i></span>
							<span class="time"><i class="glyphicon glyphicon-time"></i>2016-08-04</span>
						</div>
					</div>
				</div>
				<div class="grid-item list-view col-lg-3 col-md-3 col-sm-6 col-xs-10">
					<div class="img-list">
						<img src="http://source.timekey.top/list-4.jpg" />
						<div class="img-span">
							<span class="user"><i class="glyphicon glyphicon-user"></i>  Atom</span>
							<span class="like"><i class="glyphicon glyphicon-heart"></i></span>
							<span class="time"><i class="glyphicon glyphicon-time"></i>2016-08-04</span>
						</div>
					</div>
				</div>

				<div class="grid-item list-view col-lg-3 col-md-3 col-sm-6 col-xs-10">
					<div class="img-list">
						<img src="http://source.timekey.top/list-1.jpg" />
						<div class="img-span">
							<span class="user"><i class="glyphicon glyphicon-user"></i>  Atom</span>
							<span class="like"><i class="glyphicon glyphicon-heart"></i></span>
							<span class="time"><i class="glyphicon glyphicon-time"></i>2016-08-04</span>
						</div>
					</div>
				</div>
				<div class="grid-item list-view col-lg-3 col-md-3 col-sm-6 col-xs-10">
					<div class="img-list">
						<img src="http://source.timekey.top/list-2.jpg" />
						<div class="img-span">
							<span class="user"><i class="glyphicon glyphicon-user"></i>  Atom</span>
							<span class="like"><i class="glyphicon glyphicon-heart"></i></span>
							<span class="time"><i class="glyphicon glyphicon-time"></i>2016-08-04</span>
						</div>
					</div>
				</div>
				<div class="grid-item list-view col-lg-3 col-md-3 col-sm-6 col-xs-10">
					<div class="img-list">
						<img src="http://source.timekey.top/list-3.jpg" />
						<div class="img-span">
							<span class="user"><i class="glyphicon glyphicon-user"></i>  Atom</span>
							<span class="like"><i class="glyphicon glyphicon-heart"></i></span>
							<span class="time"><i class="glyphicon glyphicon-time"></i>2016-08-04</span>
						</div>
					</div>
				</div>
				<div class="grid-item list-view col-lg-3 col-md-3 col-sm-6 col-xs-10">
					<div class="img-list">
						<img src="http://source.timekey.top/list-4.jpg" />
						<div class="img-span">
							<span class="user"><i class="glyphicon glyphicon-user"></i>  Atom</span>
							<span class="like"><i class="glyphicon glyphicon-heart"></i></span>
							<span class="time"><i class="glyphicon glyphicon-time"></i>2016-08-04</span>
						</div>
					</div>
				</div>

			</div>
		</section>
		<script>
			$('.grid').masonry({
				itemSelector: '.grid-item', // use a separate class for itemSelector, other than .col-
				columnWidth: '.grid-sizer',
				percentPosition: true
			});
		</script>

		<footer class="footer">
			<div class="container">
				<div class="row">

				</div>
			</div>
		</footer>

	</body>

</html>