当前位置：首页 > 网页特效 > 图像/媒体

基于Bootstrap仿Pinterest的网格瀑布流插件

分类：图像/媒体日期：2024-05-14 点击(5) 评论(0)

简介

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

```html
<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来作为瀑布流的容器。

```html
<div id="waterfall-container">
    
</div>
```
在容器中可以放置列表或一组div元素。

```html
<ul class="pin"><img src="" /></ul>
<ul class="pin"><img src="" /></ul>
<ul class="pin"><img src="" /></ul>
```
 
或者
 
```html
<div class="pin"><img src="" /></div>
<div class="pin"><img src="" /></div>
<div class="pin"><img src="" /></div>   
```               
例如，如果使用的是无序列表，代码如下：

```html
<ul class="pin list-group">
  <li class="list-group-item">
    <a href="javascript:;">
      <img src="images/1.jpg" />
    </a>
  </li>
</ul>
<ul class="pin list-group">
  <li class="list-group-item">
    <a href="javascript:;">
      <img src="images/2.jpg" />
    </a>
  </li>
</ul>
<ul class="pin list-group">
  <li class="list-group-item">
    <a href="javascript:;">
      <img src="images/3.jpg" />
    </a>
  </li>
</ul>      
```            
需要注意的是，img标签需要使用一个div来包裹并为容器设置一个宽度：

```html
<div class="pin">
  <img src="images/3.jpg" />
</div>                  
.waterfall .pin {
  width: 200px;
}        
```          
#####  初始化插件
在页面DOM元素加载完毕之后，可以通过waterfall方法来初始化该瀑布流插件。

```html
$(document).ready(function () {
  $('#waterfall-container').waterfall();
});    
```          
#####  小技巧
你可以将所有的项存储在一个指定类型的script标签中：

```html
<script id="waterfall-template" type="text/template">
  <ul class="pin"><img src="" /></ul>
  <ul class="pin"><img src="" /></ul>
  <ul class="pin"><img src="" /></ul>
</script>  
```                
这样在刚开始页面加载的时候，浏览器会忽略这些标签。然后在使用的时候，将它们保持到容器的data对象中即可。

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

web299.com

基于Bootstrap仿Pinterest的网格瀑布流插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果