当前位置：首页 > 网页特效 > 其他

基于Bootstrap的mansory网格瀑布流布局插件

分类：其他日期：2024-05-14 点击(7) 评论(0)

简介

##### 使用方法
使用该瀑布流插件需要在页面中引入jquery和bootstrap相关文件，以及mp.mansory.js文件。

```html
<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元素是一个网格单元。

```html
<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()方法来初始化该瀑布流插件。

```html
jQuery(document).ready(function ( $ ) {
  $("#my-gallery-container").mpmansory();
});      
```            
#####  配置参数
该瀑布流插件的默认配置参数如下：

```html
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：加载时的回调函数。

web299.com

基于Bootstrap的mansory网格瀑布流布局插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

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

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

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