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

基于Bootstrap网格瀑布流插件

mp-mansory.js是一款基于Bootstrap的mansory网格瀑布流布局 jQuery插件。通过该插件可以非常轻松的实现瀑布流效果,它通过断点来控制响应式效果,非常实用。本代码适用浏览器:搜狗、360,FireFox,Chrome,Safari,Opera、傲游、世界之窗,不支持IE8及以下浏览器。有兴趣的朋友们可以来下载试试吧。本段代码兼容目前最新的各类主流浏览器,是一款非常优秀的特效源码。希望大家可以喜欢!

使用方法:

//使用该瀑布流插件需要在页面中引入jquery和bootstrap相关文件,以及mp.mansory.js文件。
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script type="text/javascript" src="path/to/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="src/mp.mansory.js"></script>

HTML 结构:

//该瀑布流的HTML结构使用.container容器来包裹一个二级父容器。在二级父容器中,每一个<div>元素是一个网格单元。
<div class="container">
  <div id="my-gallery-container">
    <div class="item" data-order="31">
      <p>item 0</p>
    </div>
    <div class="item h200" data-order="30">
      <p>item 1</p>
    </div>
    <div class="item h250" data-order="29">
      <p>item 2</p>
    </div>
    <div class="item h150" data-order="28">
      <p>item 3</p>
    </div>
    ......
  </div>
</div>

初始化插件:

//在页面DOM元素加载完毕之后,可以通过mpmansory()方法来初始化该瀑布流插件。
jQuery(document).ready(function ( $ ) {
  $("#my-gallery-container").mpmansory();
});

配置参数:

//该瀑布流插件的默认配置参数如下:
jQuery(document).ready(function ( $ ) {
  $("#my-gallery-container").mpmansory(
    {
      childrenClass: '', // default is a div
      columnClasses: '', //add classes to items
      breakpoints:{
        lg: 3, 
        md: 4, 
        sm: 6,
        xs: 12
      },
      distributeBy: { order: false, height: false, attr: 'data-order', attrOrder: 'asc' }, 
      onload: function (items) {
        //make somthing with items
      } 
    }
  );
});
/*--
childrenClass:网格元素的class。
    columnClasses:添加到网格上的额外的class。
    breakpoints:设置浏览器在相应断点时显示的列数。
        lg:视口尺寸大于1200像素。
        md:视口尺寸大于992像素,小于1200像素。
        sm:视口尺寸大于720像素,小于992像素。
        xs:视口尺寸小于720像素。
    distributeBy:排序选项:
        order:如果设置为true,网格项按默认的顺序排列。
        height:如果设置为true,没列的高度使用分配项的最小高度。
        attr:使用data-order属性来排序。
        attrOrder:升序或降序:'asc'/'desc'。
    onload:加载时的回调函数。
*/

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

0
广告位招租

评论0

请先

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

社交账号快速登录