浏览 2193 次
|
锁定老帖子 主题：类似Pinterest的瀑布流布局
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2012-01-02
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Water fall demo</title>
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<style>
.columns {border: 1px solid blue; float: left; min-height: 200px; position: relative; width: 100%;}
.column {border: 1px solid red; display: none; margin: 10px; position: absolute; width: 100px;}
</style>
</head>
<body>
<div id="columns" class="columns">
<div class="column" style="min-height: 100px;"></div>
<div class="column" style="min-height: 200px;"></div>
<div class="column" style="min-height: 150px;"></div>
<div class="column" style="min-height: 180px;"></div>
<div class="column" style="min-height: 130px;"></div>
<div class="column" style="min-height: 140px;"></div>
<div class="column" style="min-height: 120px;"></div>
</div>
<script type="text/javascript">
function buildWaterFall(colsBlockId, colCount, margin) {
if (colCount < 1) {
colCount = 1;
}
if (typeof margin == 'undefined' || margin < 0) {
margin = 10;
}
var container = $("#" + colsBlockId);
var columns = container.children();
var left = 0, top = 0;
var i = 0;
var maxHeight = 0;
while(i < columns.length) {
var col = $(columns[i]);
col.attr('id', i);
col.css({
'left': left + 'px',
'top': top + 'px'
}).show();
var mh = computeScrollTop(col) + margin;
if (maxHeight < mh) {
maxHeight = mh;
}
i++;
if (i % colCount == 0) {
left = 0;
} else {
left += col.scrollLeft() + margin + col.width();
}
var aboveIndex = i - colCount;
if (aboveIndex >= 0) {
top = computeScrollTop($(columns[aboveIndex])) + margin;
}
}
container.height(maxHeight + margin + 'px');
}
function computeScrollTop(elem) {
// the JQuery method 'scrollTop()' sometimes can't get the expected result,
// especially when the columns is less than 3.
var h = elem.css('top');
if (typeof h != 'undefined') {
h = parseInt(h.replace('/px/', ''));
} else {
h = 0;
}
return h + elem.height();
}
buildWaterFall('columns', 4);
</script>
</body>
</html>
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
