当前位置:主页 > 网页特效 > 瀑布流特效 >

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

发布时间:2018/06/03 来源:互联网 浏览: 关键词:bootstrap 瀑布流 pinterest 
基于Bootstrap仿Pinterest的网格瀑布流插件 基于Bootstrap仿Pinterest的网格瀑布流插件
阿里云
简要教程

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

Bootstrap-waterfall瀑布流布局

 安装

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

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

 使用方法

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

<linkhref="path/to/css/bootstrap.min.css"rel="stylesheet">
<scriptsrc="js/jquery.min.js"></script>
<scriptsrc="js/bootstrap-waterfall.js"></script>                 
 HTML结构

使用一个<div>来作为瀑布流的容器。

<divid="waterfall-container">
    <!-- Should have markups of the list of pins here -->
</div>

在容器中可以放置列表或一组<div>元素。

<ulclass="pin"><imgsrc=""/></ul>
<ulclass="pin"><imgsrc=""/></ul>
<ulclass="pin"><imgsrc=""/></ul>
 
或者
 
<divclass="pin"><imgsrc=""/></div>
<divclass="pin"><imgsrc=""/></div>
<divclass="pin"><imgsrc=""/></div>                 

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

<ulclass="pin list-group">
  <liclass="list-group-item">
    <ahref="javascript:;">
      <imgsrc="images/1.jpg"/>
    </a>
  </li>
</ul>
<ulclass="pin list-group">
  <liclass="list-group-item">
    <ahref="javascript:;">
      <imgsrc="images/2.jpg"/>
    </a>
  </li>
</ul>
<ulclass="pin list-group">
  <liclass="list-group-item">
    <ahref="javascript:;">
      <imgsrc="images/3.jpg"/>
    </a>
  </li>
</ul>                 

需要注意的是,<img>标签需要使用一个<div>来包裹并为容器设置一个宽度:

<divclass="pin">
  <imgsrc="images/3.jpg"/>
</div>                 
.waterfall .pin {
  width:200px;
}                 
 初始化插件

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

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

 小技巧

你可以将所有的项存储在一个指定类型的<script>标签中:

<scriptid="waterfall-template"type="text/template">
  <ulclass="pin"><imgsrc=""/></ul>
  <ulclass="pin"><imgsrc=""/></ul>
  <ulclass="pin"><imgsrc=""/></ul>
</script>                 

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

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

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

共有人阅读,期待你的评论!评论
骚年说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!
Top