原算法可能会产生一个问题，列之间的高度差会很大。新算法进行了改进，会使得高度差进可能小，达到高度平衡。基本思想是，每次计算一个块的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 Masonry来创建类似于Pinterest的瀑布流布局。 首先，你需要在项目中引入jQuery库和jQuery Masonry插件。你可以从官方GitHub仓库或者CDN服务获取这两个资源。确保它们在HTML...
总的来说，实现Android平台上的Pinterest瀑布流布局涉及多个技术层面，包括UI布局、数据加载、性能优化等，需要开发者具备扎实的Android基础和良好的编程实践。提供的JavaApk源码说明.txt可能是实现这一功能的代码...
本压缩包“安卓Android源码——android平台仿pinterest瀑布流展现方式实现.zip”包含了实现这一效果的具体代码示例，有助于开发者理解和掌握这一技术。 首先，我们要理解瀑布流布局（Masonry Layout）的核心概念。...
在安卓开发中，实现类似Pinterest的瀑布流布局是一种常见的需求，这种布局的特点是元素自适应地垂直排列，形成一种错落有致的效果。本压缩包提供的"安卓Android源码——android平台仿pinterest瀑布流展现方式实现....
总的来说，这个压缩包中的TestCascade项目提供了实现Android平台上类似Pinterest瀑布流展示方式的实例，涵盖了RecyclerView、自定义LayoutManager、数据加载和优化等多个关键知识点。开发者可以通过研究这个示例，...
通过这样的设置，你就可以在自己的项目中实现一个类似Pinterest的瀑布流布局了。记得根据实际需求调整配置项，并根据项目风格定制CSS样式。同时，如果你遇到问题或想要实现特定功能，查阅提供的文档或在线搜索相关...
在iOS开发中，创建一个类似Pinterest的瀑布流视图是一种常见的需求，主要用于展示大量图片和文字内容，如社交媒体、电商应用等。Pinterest以其独特的布局方式，即“瀑布流”（Masonry Layout）著称，这种布局能充分...
**jQuery仿Pinterest网站响应式图片瀑布流布局插件** 在网页设计中，为了提供良好的用户体验，尤其是对于图片展示类网站，瀑布流布局已经成为一种流行的设计趋势。Pinterest作为一个以瀑布流布局为核心的社交网络...
而StaggeredGridLayoutManager是Android Support Library的一部分，为RecyclerView提供了类似Pinterest的瀑布流布局。它的优点在于开箱即用，可以自动处理不同高度的item，简化了开发流程。开发者只需要创建一个...
1. **Pinterest瀑布流布局**：Pinterest的布局以其独特的瀑布流设计而闻名，这种布局允许内容以多列形式显示，随着屏幕尺寸的变化，列的数量会自动调整，保持良好的视觉效果。 2. **StaggeredGridLayoutManager**：...
本篇将详细介绍如何在Android平台上实现类似Pinterest的瀑布流布局。 1. **自定义布局控件** 实现瀑布流布局，首先需要创建一个自定义的ViewGroup，继承自LinearLayout或GridView。这个自定义控件需要重写...
瀑布流布局，也被称为Masonry布局或Pinterest布局，是一种常用于网页和移动应用中的展示大量图像或内容的方式。它的特点是内容以多列的形式排列，每一列的高度不固定，随着页面滚动，新内容会自然地填充到列的底部，...
瀑布流布局，又称为Pinterest风格布局，是一种在Android平台上广泛应用于图片展示、商品浏览等场景的界面设计。这种布局的特点是元素以多列的形式呈现，每一列的高度根据内容动态调整，形成一种类似瀑布倾泻而下的...
在Android平台上，模仿Pinterest的瀑布流布局是一种常见的展示大量图像和信息的方式，它以其美观、交互性强的特点深受开发者和用户喜爱。实现这种效果通常需要自定义控件，以实现动态加载、平滑滚动以及不同大小卡片...
- Pinterest瀑布流布局的核心是`RecyclerView`，它是Android中的一个强大视图组件，用于展示可滚动的数据集。相比于旧版的`ListView`，`RecyclerView`提供了更好的性能和更多的定制选项。 - 使用`...
本压缩包"Android高级应用源码-android平台仿pinterest瀑布流展现方式实现.zip"提供了实现这一功能的源代码，有助于开发者深入理解并实践瀑布流布局的构建。 瀑布流（又称Pinterest式布局）的核心特点是每个单元格...
在Android平台上，Pinterest式...以上就是在Android平台上实现Pinterest瀑布流展现方式的一些核心知识点和实现步骤。通过这个zip源码资源，开发者可以深入学习和理解这些技术，从而在自己的项目中实现类似的布局效果。
瀑布流布局，又称为Pinterest布局，是Android应用中一种常见的图片展示方式，因其效果类似瀑布倾泻而下，且图片可以交错排列，视觉效果独特，故得名。这种布局方式在展示图片分享、商品列表等场景中非常流行，能够...
4. **jQuery或其他库**：虽然JavaScript可以完成瀑布流布局，但为了简化开发，开发者常会使用jQuery或类似的库。这些库提供了便捷的DOM操作、事件处理等功能，可以简化代码，提高开发效率。 5. **数据获取与处理**...
Pinterest瀑布流布局的核心在于JavaScript的实现，通常会结合jQuery库。在这个代码实现中，可能会包含以下关键部分： 1. **HTML结构**：HTML部分需要按照Bootstrap的栅格系统进行组织，定义各个图片或内容区块的...