基于Bootstrap网格瀑布流插件

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

*/