瀑布流

瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest，逐渐在国内流行开来。国内大多数清新站基本为这类风格。
Masonry.js非常爽的瀑布流构建。
Masonry的使用非常简单若是配上bootstrap真的是特别棒
点击查看Demo演示
首先引入masonryjs
[php]<script src="https://npmcdn.com/[email protected]/dist/masonry.pkgd.min.js"></script>[/php]
然后 DOM
[php]
<div class="grid">
<div class="grid-item">...</div>
<div class="grid-item grid-item--width2">...</div>
<div class="grid-item">...</div>
...
</div>
[/php]
加上一点点CSS
[css]
.grid-item { width: 200px; }
.grid-item--width2 { width: 400px; }
[/css]
最后借助Jquery完成初始化
[js]
$('.grid').masonry({
// options
itemSelector: '.grid-item',
columnWidth: 200
});
[/js]

搭配bootstarp的例子

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

[php]
<!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/[email protected]/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">

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

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

</div>

</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>
[/php]

瀑布流快速构建 Masonry

瀑布流

搭配bootstarp的例子

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

文章评论