盒子

Kissy WaterFall 静态调用

需要用到的JS

1
2
3
4
<script src="kissy.js"></script>
<script src="base.js"></script>
<script src="loader.js"></script>
<script src="waterfall.js"></script>

需要设置的CSS样式

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
.ks-waterfall {
position: absolute;
width: 192px;
overflow: hidden;
padding: 15px;
border: 2px solid #ddd;
margin-bottom: 20px;
text-align: center;
left:-9999px;
top:-9999px;
}
</style>

HTML关键代码

1
2
3
4
5
6
<div id='container' style="position: relative;">
<!-- 重复的数据块 -->
<div class="ks-waterfall"><img src="http://farm7.static.flickr.com/6072/6128820646_75d4f4f26d_m.jpg" width="192" height="113">
<div class="title">untitled</div>
</div>
</div>

最后调用WaterFall的内嵌脚本

1
2
3
4
5
6
7
KISSY.use("waterfall", function (S, Waterfall) {
new Waterfall({
container: "#container", //节点容器
minColCount: 2, //最小列数
colWidth: 235 //每列的宽度
});
});