仿Pinterest的网格瀑布流特效插件

仿Pinterest的网格瀑布流特效插件

Bootstrap-waterfall是一款基于Bootstrap仿Pinterest网站的网格瀑布流插件。该瀑布流插件支持响应式布局,使用简单,非常实用。

安装
可以通过npm和bower来安装Bootstrap-waterfall插件

1
2
$ npm install bootstrap-waterfall
$ bower install bootstrap-waterfall

使用方法
在页面中引入bootstrap相关文件,以及jquery和bootstrap-waterfall.js文件

1
2
3
<link href="path/to/css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap-waterfall.js"></script>

HTML结构
使用一个div来作为瀑布流的容器

1
2
3
<div id="waterfall-container">
    <!-- Should have markups of the list of pins here -->
</div>

在容器中可以放置列表或一组

元素

1
2
3
4
5
6
7
<ul class="pin"><img src="" /></ul>
<ul class="pin"><img src="" /></ul>
<ul class="pin"><img src="" /></ul>
或者
<div class="pin"><img src="" /></div>
<div class="pin"><img src="" /></div>
<div class="pin"><img src="" /></div>

网格瀑布流插件

文件信息:

    0

    发表评论