基于Bootstrap的mansory响应式瀑布流插件

所属分类:UI-布局

 14307  45  查看评论 (0)
分享到微信朋友圈
X
基于Bootstrap的mansory响应式瀑布流插件 ie兼容9

使用方法

使用该瀑布流插件需要在页面中引入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:加载时的回调函数。

相关插件-布局

jquery移动端框架-iscroll4.js

之所以iscroll会诞生,主要是因为无论是在iphone、ipod、android 或是更早前的移动webkit都没有提供一种原生的方式来支持在一个固定高度的容器内滚动内容。
  布局
 74968  343

jQuery响应式app网站模板

jQuery响应式app网站模板,点击下载按钮即可跳转到本页面的指定的位置
  布局
 40856  524

紫色创意企业工作室Bootstrap模板

Mogh是一个精美的HTML模板设计,适合数码机构商业、金融、企业网站。您可以使用这个美丽的改造成你需要的模板。模板是基于Bootstrap程序设计,这模板将100%的流体响应任何设备。我们已经测试了这个在iMacMacbook ProiPhoneiPad和三星S9。此外您将得到18+独特的HTML文件。
  布局
 26311  363

伸展式弹出页面

点击导航后弹出层为伸展式打开
  布局
 31596  430

讨论这个项目(0)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复