当前位置:JS特效 » 瀑布流插件 » 基于Bootstrap仿Pinterest的网格瀑布流插件
 基于Bootstrap仿Pinterest的网格瀑布流插件
如果您觉得内容不错,请分享:

插件介绍

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

浏览器兼容性

浏览器兼容性
时间:2021-07-24 阅读:136
简要教程

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

Bootstrap-waterfall瀑布流布局

安装

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

$ npm install bootstrap-waterfall
$ bower install bootstrap-waterfall
                

使用方法

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



                  
                
HTML结构

使用一个

来作为瀑布流的容器。

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

元素。

或者

例如,如果使用的是无序列表,代码如下:



                  
                

需要注意的是,标签需要使用一个

来包裹并为容器设置一个宽度:

.waterfall .pin {
  width: 200px;
}                  
                
初始化插件

在页面DOM元素加载完毕之后,可以通过waterfall方法来初始化该瀑布流插件。

$(document).ready(function () {
  $('#waterfall-container').waterfall();
});              
                

小技巧

你可以将所有的项存储在一个指定类型的

这样在刚开始页面加载的时候,浏览器会忽略这些标签。然后在使用的时候,将它们保持到容器的data对象中即可。

$('#waterfall-container').data('bootstrap-waterfall-template', $('#waterfall-template').html());
$('#waterfall-container').waterfall();               
                

Bootstrap-waterfall瀑布流布局插件的egithub地址为:https://github.com/Mystist/bootstrap-waterfall

Top