瀑布流
瀑布流为多项高度不同的数据显示方式，是图片列表常用的显示方式。
瀑布流样式
框架用.falls定义瀑布流，子项用.falls-item定义，默认一行显示2列，也可自定义参数column显示的列数。
1
2
3
4
5
6
7
8
9
10
11
12
<div class="falls" id="falls">
<div class="falls-item alert-info" style="height:165px;">1</div>
<div class="falls-item alert-success" style="height:156px;">2</div>
<div class="falls-item alert-danger" style="height:138px;">3</div>
<div class="falls-item alert-warning" style="height:175px;">4</div>
<div class="falls-item alert-info" style="height:123px;">5</div>
<div class="falls-item alert-success" style="height:182px;">6</div>
<div class="falls-item alert-danger" style="height:115px;">7</div>
<div class="falls-item alert-warning" style="height:143px;">8</div>
<div class="falls-item alert-info" style="height:188px;">9</div>
<div class="falls-item alert-success" style="height:191px;">10</div>
<div class="falls-item alert-danger" style="height:100px;">11</div>
<div class="falls-item alert-warning" style="height:200px;">12</div>
</div>
调用方式
<script>
$(function(){
$('#falls').falls({
"column":4,
});
});
</script>
参数说明
| 参数 | 类型 | 默认值 | 参数值 | 说明 |
|---|---|---|---|---|
| loading | html | / | / | 自定义加载动画 |
| space | number | 16 | / | 元素之间的间距 |
| column | number | 2 | / | 列数 |
| auto | json | / | / | 响应列数 |
| toggle | string | / | / | 触发显示下一页的对象，无则滚动加载 |
| scroll | object | window | / | 滚动的对象，无toggle参数时使用 |
| none | string | none | / | 当toggle或scroll时，显示没有更多内容 |
| list | number | / | / | 每页显示的个数 |
| url | url | / | / | 异步时的URL |
| pagination | number | page | / | 异步时的分页码，每次触发时递增，有url参数时使用 |
分页加载
多个项目可设置参数list实现分页显示；同时设置触发对象的参数toggle，点击后加载更多。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="falls" id="toggle">
<div class="falls-item alert-info" style="height:165px;">1</div>
...
<div class="falls-item alert-warning" style="height:200px;">24</div>
</div>
<div id="more" class="margin-top" align="center"><button class="button">更多</button></div>
<script>
$(function(){
$('#toggle').falls({
"column":3,
"list":6,
"toggle":"#more"
});
});
</script>
滚动加载
除点击元素加载更多外，还可以使用滚动加载更多，滚动对象scroll默认为窗口，也可以指定滚动对象。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div id="scrollfalls" style="height:400px;overflow-x:hidden;overflow-y:auto;">
<div class="falls" id="toggle">
<div class="falls-item alert-info" style="height:165px;">1</div>
...
<div class="falls-item alert-warning" style="height:200px;">24</div>
</div>
</div>
<script>
$(function(){
$('#scroll').falls({
"column":3,
"list":8,
"scroll":"#scrollfalls",
"none":"没有更多",
});
});
</script>
异步加载
项目内容还可以通过异步加载，配置url参数，默认页码pagination值为page，也可以自定义页码，页码随加载次数值递增。
<div class="falls" id="ajax"></div>
<div id="ajaxmore" class="margin-top" align="center"><button class="button">更多</button></div>
<script>
$(function(){
$('#ajax').falls({
"column":3,
"toggle":"#ajaxmore",
"url":"/2.0/data/falls.html",
"pagination":"pages"
});
});
</script>
响应式瀑布流
响应式瀑布流为在不同的终端下，显示不同的列数，通过配置json格式的auto参数实现，如{"768":3}为在终端宽度为768以上，则显示3列。
1
2
3
4
5
6
7
8
9
10
11
12
<div class="falls" id="auto">
<div class="falls-item alert-info" style="height:165px;">1</div>
<div class="falls-item alert-success" style="height:156px;">2</div>
<div class="falls-item alert-danger" style="height:138px;">3</div>
<div class="falls-item alert-warning" style="height:175px;">4</div>
<div class="falls-item alert-info" style="height:123px;">5</div>
<div class="falls-item alert-success" style="height:182px;">6</div>
<div class="falls-item alert-danger" style="height:115px;">7</div>
<div class="falls-item alert-warning" style="height:143px;">8</div>
<div class="falls-item alert-info" style="height:188px;">9</div>
<div class="falls-item alert-success" style="height:191px;">10</div>
<div class="falls-item alert-danger" style="height:100px;">11</div>
<div class="falls-item alert-warning" style="height:200px;">12</div>
</div>
<script>
$(function(){
$('#auto').falls({
"auto":{"768":3,"1232":4}
});
});
</script>