<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基于Bootstrap仿Pinterest的网格瀑布流插件|-自由分享jQuery、html5、css3的插件库</title>
<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="http://cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="htmleaf-container">
<header class="htmleaf-header">
<h1>基于Bootstrap仿Pinterest的网格瀑布流插件 <span>Responsive Pinterest-style Layout Plugin For Bootstrap</span></h1>
<div class="htmleaf-links">
</div>
</header>
<div class="container">
<div class="waterfall">
</div>
</div>
<div class="related">
</div>
</div>
<script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')</script>
<script src="js/bootstrap-waterfall.js"></script>
<script id="waterfall-template" type="text/template">
<ul class="list-group">
<li class="list-group-item">
<a href="javascript:;">
<img src="images/1.jpg" />
</a>
</li>
<li class="list-group-item">
<button type="button" class="btn btn-default btn-xs" title="thumb up"><span class="glyphicon glyphicon-thumbs-up"></span></button>
<button type="button" class="btn btn-default btn-xs" title="thumb down"><span class="glyphicon glyphicon-thumbs-down"></span></button>
<button type="button" class="btn btn-default btn-xs pull-right" title="pin"><span class="glyphicon glyphicon-pushpin"></span></button>
</li>
<li class="list-group-item">
<div class="media">
<div class="media-left">
<a href="javascript:;">
<img class="media-object img-rounded" style="width: 30px; height: 30px;" src="images/avatar_30.png" />
</a>
</div>
<div class="media-body">
<h5 class="media-heading">Liber</h5>
<small>I love this pin!</small>
</div>
</div>
</li>
</ul>
<ul class="list-group">
<li class="list-group-item">
<a href="javascript:;">
<img src="images/2.jpg" />
</a>
</li>
<li class="list-group-item">
<button type="button" class="btn btn-default btn-xs" title="thumb up"><span class="glyphicon glyphicon-thumbs-up"></span></button>
<button type="button" class="btn btn-default btn-xs" title="thumb down"><span class="glyphicon glyphicon-thumbs-down"></span></button>
<button type="button" class="btn btn-default btn-xs pull-right" title="pin"><span class="glyphicon glyphicon-pushpin"></span></button>
</li>
<li class="list-group-item">
<div class="media">
<div class="media-left">
<a href="javascript:;">
<img class="media-object img-rounded" style="width: 30px; height: 30px;" src="images/avatar_30.png" />
</a>
</div>
<div class="media-body">
<h5 class="media-heading">Liber</h5>
<small>I love this pin!</small>
</div>
</div>
</li>
</ul>
<ul class="list-group">
<li class="list-group-item">
<a href="javascript:;">
<img src="images/3.jpg" />
</a>
</li>
<li class="list-group-item">
<button type="button" class="btn btn-default btn-xs" title="thumb up"><span class="glyphicon glyphicon-thumbs-up"></span></button>
<button type="button" class="btn btn-default btn-xs" title="thumb down"><span class="glyphicon glyphicon-thumbs-down"></span></button>
<button type="button" class="btn btn-default btn-xs pull-right" title="pin"><span class="glyphicon glyphicon-pushpin"></span></button>
</li>
<li class="list-group-item">
<div class="media">
<div class="media-left">
<a href="javascript:;">
<img class="media-object img-rounded" style="width: 30px; height: 30px;" src="images/avatar_30.png" />
</a>
</div>
<div class="media-body">
<h5 class="media-heading">Liber</h5>
<small>I love this pin!</small>
</div>
</div>
</li>
</ul>
<ul class="list-group">
<li class="list-group-item">
<a href="javascript:;">
<img src="images/4.jpg" />
</a>
</li>
<li class="list-group-item">
<button type="button" class="btn btn-default btn-xs" title="thumb up"><span class="glyphicon glyphicon-thumbs-up"></span></button>
<button type="button" class="btn btn-default btn-xs" title="thumb down"><span class="glyphicon glyphicon-thumbs-down"></span></button>
<button type="button" class="btn btn-default btn-xs pull-right" title="pin"><span class="glyphicon glyphicon-pushpin"></span></button>
</li>
<li class="list-group-item">
<div class="media">
<div class="media-left">
<a href="javascript:;">
<img class="media-object img-rounded" style="width: 30px; height: 30px;" src="images/avatar_30.png" />
</a>
</div>
<div class="media-body">
<h5 class="media-heading">Liber</h5>
<small>Awesome! I love this pin!I love this pin!</small>
</div>
</div>
</li>
</ul>
<ul class="list-group">
<li class="list-group-item">
<a href="javascript:;">
<img src="images/5.jpg" />
</a>
</li>
<li class="list-group-item">
<button type="button" class="btn btn-default btn-xs" title="thumb up"><span class="glyphicon glyphicon-thumbs-up"></span></button>
<button type="button" class="btn btn-default btn-xs" title="thumb down"><span class="glyphicon glyphicon-thumbs-down"></span></button>
<button type="button" class="btn btn-default btn-xs pull-right" title="pin"><span class="glyphicon glyphicon-pushpin"></span></button>
</li>
<li class="list-group-item">
<div class="media">
<div class="media-left">
<a href="javascript:;">
<img class="media-object img-rounded" style="width: 30px; height: 30px;" src="images/avatar_30.png" />
</a>
</div>
<div class="media-body">
<h5 class="media-heading">Liber</h5>
<small>How about this? Awesome! I love this pin!</small>
</div>
</div>
</li>
</ul>
<ul class="list-group">
<li class="list-group-item">
<a href="javascript:;">
<img src="images/6.jpg" />
</a>
</li>
<li class="list-group-item">
<button type="button" class="btn btn-default btn-xs" title="thumb up"><span class="glyphicon glyphicon-thumbs-up"></span></button>
<button type="button" class="btn btn-default btn-xs" title="thumb down"><span class="glyphicon glyphicon-thumbs-down"></span></button>
<button type="button" class="btn btn-default btn-xs pull-right" title="pin"><span class="glyphicon glyphicon-pushpin"></span></button>
</li>
<li class="list-group-item">
<div class="media">
基于Bootstrap仿Pinterest实现超酷的网格瀑布流插件特效源码.zip
版权申诉
88 浏览量
2022-11-09
22:27:43
上传
评论
收藏 686KB ZIP 举报
基于Bootstrap仿Pinterest实现超酷的网格瀑布流插件特效源码.zip （33个子文件） 
132687021948656683 likecs.com_132687021991437692 css 
htmleaf-demo.css 6KB main.css 670B related 
2.jpg 51KB 1.jpg 26KB images 8.jpg 53KB 15.jpg 11KB
avatar_30.png 3KB 14.jpg 24KB 1.jpg 47KB 6.jpg 49KB 3.jpg 37KB 5.jpg 26KB 2.JPG 26KB 19.jpg 23KB 11.jpg 36KB 4.jpg 34KB 10.jpg 20KB 17.jpg 19KB 18.jpg 18KB 13.jpg 15KB 16.jpg 17KB 12.jpg 23KB 9.jpg 40KB 20.jpg 26KB 7.jpg 16KB fonts icomoon.woff 1KB
icomoon.svg 2KB icomoon.eot 2KB icomoon.ttf 1KB
index.html 48KB js jquery-1.11.0.min.js 94KB bootstrap-waterfall.js 11KB readme.html 540B资源评论
