简介

这款Mansory瀑布流JS网格插件基于Bootstrap，是一款非常不错的插件插件，推荐下载使用

使用教程

安装
<link rel="stylesheet" type="text/css" href="code/bootstrap.min.css">
<script type="text/javascript" src="code/jquery.js"></script>
<script type="text/javascript" src="code/bootstrap.min.js"></script>
<script type="text/javascript" src="code/mp.mansory.js"></script>
<link rel="stylesheet" type="text/css" href="code/style.css">
<link rel="stylesheet" type="text/css" href="bluestep.css">
相关代码在源码包里


添加示例HTML代码如下
<div class="container">
<div class="" id="my-gallery-container">
<div class="item" data-order="31">
<p>瀑布块0</p>
</div>
<div class="item h200" data-order="30">
<p>瀑布块1</p>
</div>
<div class="item h250" data-order="29">
<p>瀑布块2</p>
</div>
<div class="item h150" data-order="28">
<p>瀑布块3</p>
</div>
<div class="item h100" data-order="27">
<p>瀑布块4</p>
</div>
<div class="item" data-order="26">
<p>瀑布块5</p>
</div>
<div class="item h200" data-order="25">
<p>瀑布块6</p>
</div>
<div class="item h150" data-order="24">
<p>瀑布块7</p>
</div>
<div class="item h100" data-order="23">
<p>瀑布块8</p>
</div>
<div class="item" data-order="22">
<p>瀑布块9</p>
</div>
<div class="item h200" data-order="21">
<p>瀑布块10</p>
</div>
<div class="item h150" data-order="20">
<p>瀑布块11</p>
</div>
<div class="item h100" data-order="19">
<p>瀑布块12</p>
</div>
<div class="item" data-order="18">
<p>瀑布块13</p>
</div>
<div class="item h200" data-order="17">
<p>瀑布块14</p>
</div>
<div class="item h150" data-order="16">
<p>瀑布块15</p>
</div>
<div class="item h150" data-order="15">
<p>瀑布块16</p>
</div>
<div class="item h100" data-order="14">
<p>瀑布块17</p>
</div>
<div class="item" data-order="13">
<p>瀑布块18</p>
</div>
<div class="item h200" data-order="12">
<p>瀑布块19</p>
</div>
<div class="item h250" data-order="11">
<p>瀑布块20</p>
</div>
<div class="item h200" data-order="10">
<p>瀑布块21</p>
</div>
<div class="item h200" data-order="9">
<p>瀑布块22</p>
</div>
<div class="item" data-order="8">
<p>瀑布块23</p>
</div>
<div class="item h150" data-order="7">
<p>瀑布块24</p>
</div>
<div class="item h100" data-order="6">
<p>瀑布块25</p>
</div>
<div class="item" data-order="5">
<p>瀑布块26</p>
</div>
<div class="item h200" data-order="4">
<p>瀑布块27</p>
</div>
<div class="item h150" data-order="3">
<p>瀑布块28</p>
</div>
<div class="item" data-order="2">
<p>瀑布块29</p>
</div>
<div class="item h150" data-order="1">
<p>瀑布块30</p>
</div>
<div class="item" data-order="0">
<p>瀑布块31</p>
</div>
</div>

实例化页面
<script type="text/javascript">
jQuery(document).ready(function ( $ ) {
$("#my-gallery-container").mpmansory(
{
childrenClass: 'item', // default is a div
columnClasses: 'padding', //add classes to items
breakpoints:{
lg: 3,
md: 4,
sm: 6,
xs: 12
},
distributeBy: { order: false, height: false, attr: 'data-order', attrOrder: 'asc' }, //default distribute by order, options => order: true/false, height: true/false, attr => 'data-order', attrOrder=> 'asc'/'desc'
onload: function (items) {
//make somthing with items
}
}
);
});
</script>

在线预览 网盘下载

原创文章，转载请注明来自：http://www.bluestep.cc/?p=3091