原算法可能会产生一个问题，列之间的高度差会很大。新算法进行了改进，会使得高度差进可能小，达到高度平衡。基本思想是，每次计算一个块的top时，寻找高度最小的那一列。看了实验结果，新算法还不是最优的。
function buildWaterFall(params) {
if (! IK.isset(params)) {
return;
}
var colsBlockId = params.id;
var colCount = params.count;
var margin = params.margin;
var container = $("#" + colsBlockId);
if (container.length == 0) {
return;
}
if (colCount < 1) {
colCount = 1;
}
if (! IK.isset(margin)) {
margin = 20;
}
var columns = container.children();
if (columns.length < 1) {
return;
}
var colTops = [];
for(var i = 0; i < colCount; i++) {
colTops[i] = 0;
}
var colWidth = $(columns[0]).width() + margin;
function getPosition(colHeight) {
var diff = 0;
var index = 0; // 这里其实只需要找高度最小的列就行
for(var i = 0; i < colCount - 1; i++) {
for (var j = i + 1; j < colCount; j++) {
var df = colTops[i] - colTops[j];
var abDiff = Math.abs(df);
if (diff < abDiff) {
diff = abDiff;
index = df < 0 ? i : j;
}
}
}
var left = colWidth * index;
var top = colTops[index];
if (IK.isset(colHeight)) {
colTops[index] += colHeight + margin;
}
return {'left': left + 'px', 'top': top + 'px'};
}
for(var i = 0; i < columns.length; i++) {
var col = $(columns[i]);
var url = col.attr('url');
if (IK.isset(url)) {
col.click(function(){
Util.redirect($(this).attr('url'));
});
}
var style = getPosition(col.height());
col.css(style).show();
}
var maxHeight = 0;
for(var i = 0; i < colCount; i++) {
if (maxHeight < colTops[i]) {
maxHeight = colTops[i];
}
}
container.height(maxHeight + 'px');
}, /* buildWaterFall */
<!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>
分享到：
相关推荐
jquery 瀑布流布局插件, 类似于 Pinterest
源码BrickView，BrickView是一个简单的动态网格布局瀑布流view，类似于Pinterest。用法类似于UITableViewDelegate 和 UITableViewDatasource。 测试环境： Xcode 6.0 iOS 6.0
Pinto是一款轻量级、响应式和可定制的图片网格布局jQuery瀑布流插件。该图片网格布局的特点是使用简单，而且插件本身属于轻量级的，压缩版本小于1kb。该图片网格布局的效果类似于pinterest网站的瀑布流布局。
最早使用此布局的是国外的图片网站Pinterest，之后国内的一些图片网站也开始使用瀑布流布局，包括和Pinterest类似的花瓣网、图片社区lofter、美丽说、蘑菇街等等。 瀑布流在布局上对于大多数人来说应该是很简单的，...
1.类似 Pinterest、美丽说的瀑布流布局、内容随页面滚动自动加载，无须翻页及刷新; 2.内置新浪微博、腾讯微博、豆瓣账号登录接口; 3.针对中小站长、淘宝客、网店设计，提供商品信息抓取、图片抓取等必备功能 4....
Android 实现 类似蘑菇街,美丽说, pinterest 效果的瀑布流框架, 可自定义 瀑布流显示列数，使用自定义的 adapter 可以更方便地进行扩展.
瀑布流布局插件waterfall，这是基于jquery，类似于 Pinterest、花瓣、发现啦。直接引用js就好。兼容ie8等浏览器
Masonry是一款jQuery网格布局(瀑布流)插件，可以实现类似Pinterest模式的砌体布局效果。通过把元素自动填充在垂直的空白区域，就像墙上堆砌的石头一样。这个库还可以作为jQuery插件使用，帮助你轻松实现这种效果。...
1.类似 Pinterest、美丽说的瀑布流布局、内容随页面滚动自动加载，无须翻页及刷新; 2.内置新浪微博、腾讯微博、豆瓣账号登录接口; 3.针对中小站长、淘宝客、网店设计，提供商品信息抓取、图片抓取等必备功能 4.URL伪...
1.类似Pinterest、美丽说的瀑布流布局、内容随页面滚动自动加载，无须翻页及刷新; 2.内置新浪微博、腾讯微博、豆瓣账号登录接口; 3.针对中小站长、淘宝客、网店设计，提供商品信息抓取、图片抓取等必备功能 4.URL...
一款类似Pinterest风格的wordpress图片主题，这是一款强大的瀑布流主题。当然，该主题只要通过合理的设置，也可以变成CMS主题或者杂志主题 基于一个高级主题和网格系统设计的精巧优雅的主题。拥有几乎没有限制的布局...
对于Pinterest网站，从前端设计出发的话，我们一定不会忘记我们曾经非常流行的瀑布流布局。但是今天，给大家简要分析下 Pinterest上另外一项非常值得借鉴图片加载细节。 看看下面的截图: 大家可以感觉到图片出来的...
瀑流布局现在在很多大大小小的网站中都可以看到，可是你发现如果你想用是一件相当麻烦的事，今天有了Masonry 插件，给大家带来一个很大的惊喜，简单使用...所以，我们给这样的布局起了一个形象的名字 — 瀑布流式布局。
类似Pinterest、美丽说的瀑布流布局、内容随页面滚动自动加载，无须翻页及刷新; 针对中小站长、淘宝客、网店设计，提供商品信息抓取、图片抓取等必备功能 URL伪静态，增强搜索引擎收录，有效提高SEO效果 强大的...
瀑布流布局：在这种布局中，图片以网格形式排列，但是每列的高度由其内容决定，类似于Pinterest的布局风格。 懒加载：这是一种优化技术，只有当用户滚动到图片附近时，图片才会加载，有助于提高页面的加载速度。 ...
开源项目，以便在 android 上实现类似列表视图的 pinterest。 （您可以在链接下方查看 pinterest 应用程序的样子。） 该项目基于 sony 开发者的博客文章“制作您自己的 3d 列表”。 但是，目前它是基于 android ...