所有分类
  • 所有分类
  • 最新发布
  • WordPress主题
  • WordPress插件
  • WordPress汉化
  • HTML5/模板
  • Code/特效
  • 瀑布流
  • 导航菜单

仿Pinterest网格瀑布流插件

Bootstrap-waterfall 是一款基于Bootstrap Pinterest实现超酷的网格瀑布流插件特效源码。该瀑布流插件支持响应式布局,使用简单,非常实用。本段特效源码可以在各大网站使用,有需要的朋友直接下载使用,本段源码兼容目前最新的各类主流浏览器,是一款非常优秀的特效源码,希望对大家有所帮助,有问题及时跟我留言!

安装方法:

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

使用方法:

//在页面中引入bootstrap相关文件,以及jquery和bootstrap-waterfall.js文件。
<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来作为容器

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

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

<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>

例如无序列表如下代码

<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>

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

<div class="pin">
  <img src="images/3.jpg" />
</div>
<style>                
.waterfall .pin {
  width: 200px;
}
</style>

初始插件:

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

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

小技巧:

<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对象中即可。

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

原文链接:https://www.7zt.cn/165.html,转载请注明出处~~~

0
广告位招租

评论0

请先

疫情期间优惠活动!本站包年VIP,特惠价:58元;本站终身VIP,特惠价:88元。随着资源不断增多,随时提价!立即查看
显示验证码
没有账号? 注册  忘记密码?

社交账号快速登录