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

安装
可以通过npm和bower来安装Bootstrap-waterfall插件。
$ npm install bootstrap-waterfall
$ bower install bootstrap-waterfall
使用方法
在页面中引入bootstrap相关文件,以及jquery和bootstrap-waterfall.js文件。
HTML结构
使用一个 在容器中可以放置列表或一组 例如,如果使用的是无序列表,代码如下: 需要注意的是, 在页面DOM元素加载完毕之后,可以通过 你可以将所有的项存储在一个指定类型的 这样在刚开始页面加载的时候,浏览器会忽略这些标签。然后在使用的时候,将它们保持到容器的 Bootstrap-waterfall瀑布流布局插件的egithub地址为:https://github.com/Mystist/bootstrap-waterfall
或者
标签需要使用一个
.waterfall .pin {
width: 200px;
}
初始化插件
waterfall方法来初始化该瀑布流插件。
$(document).ready(function () {
$('#waterfall-container').waterfall();
});
小技巧
标签中:
data对象中即可。
$('#waterfall-container').data('bootstrap-waterfall-template', $('#waterfall-template').html());
$('#waterfall-container').waterfall();





