网络编程
位置：首页>> 网络编程>> 网页设计>> 瀑布流布局浅析（3）

瀑布流布局浅析（3）

作者：乔花　　发布时间：2011-09-16 20:18:09　

标签：布局,瀑布流,淘宝

3) 绝对定位。即 Pinterest ，Mark之，KISSY 采用的方式:

  • 可谓是最优的一种方案，方便添加数据内容，窗口变化，列数/数据块都会自动调整；

  • 线上例子。

缺点:

  • 需要实现知道数据块高度，如果其中包含图片，需要知道图片高度；

  • JS 动态计算数据块位置，当窗口缩放频繁，可能会狂耗性能。

KISSY.Waterfall 实现思路

KISSY 的 Waterfall 组件主要包含两个部分，一个是对现有数据块进行排列计算各自所在的位置； 二是下拉滚动时，触发加载数据操作，并把数据添加到目标容器中。

1) 数据块排列，算法步骤简述下:

  • 初始化时，对容器中已有数据块元素进行第一次计算，需要用户给定: a，容器元素 — 以此获取容器总宽度； b，列宽度； c，最小列数； 最终列数取的是容器宽度/列宽度和最小列数的最大值，这样保证了，当窗口很小时，仍然出现最小列数的数据；

  • 获得列数后，需要保存每个列的当前高度，这样在添加每个数据块时，才知道起始高度是多少；

  • 依次取容器中的所有数据块，先寻找当前高度最小的某列，之后根据列序号，确定数据块的left，top值，left 为所在列的序号乘以列宽，top 为所在列的当前高度，最后更新所在列的当前高度加上这个数据块元素的高度，至此，插入一个元素结束；

  • 当所有元素插入完毕后，调整容器的高度为各列最大的高度值，结束依次调整；

  • 性能效率上的注意点: a，如果当前正在调整中，又触发了 resize 事件，需要将上次调整暂停后执行这次调整(见 timedChunk 函数)； b，resize 触发会很频繁，可以将回调函数缓存一段时候后执行，即当这段时间内多次触发了resize事件，但回调函数只会执行一次(见 S.buffer 函数)

  • 感兴趣的可以参见源码。

2) 异步加载数据，前面讲的是如何对容器中已有元素进行排列，但很多情况下，还需要不断加载新数据块，为此专门设计了一个独立的模块 KISSY.Waterfall.Loader，其实这个功能就更简单了，仅包含两个步骤:

  • 绑定滚动事件，并确定预加载线高度值，即滚动到哪个高度后，需要去加载数据，其实这个就是列的最小高度值，这样当前滚动值和最小高度值比较一下即可判断出来，是否要触发加载数据；

  • 加载数据，为了不对数据源做太多限制，完全由使用者自己决定数据源从哪边获取和其格式，这样更好的方便用户使用。为此，该组件只提供一个load(success，end) 接口，怎样load 由用户自己去定义，而其中的 success/end，分别给出如何添加新数据(suceess 即同 addItems)/如何停止加载的接口。这样真是太方便了~~

  • 感兴趣的可以参见源码。

KISSY.Waterfall 示例和文档

看到这边，是不是很想试用一下~~ 嗯嗯，这里给出一些相关学习资料和示例，以供参考:

欢迎试用和提出意见~~

原文：http://ued.taobao.com/blog/2011/09/14/waterfall/

第一页 上一页 1 2
3
0
投稿

猜你喜欢

  • 和网友们讨论了数组取交集的方法，下面是两个实现arr1=["1","5","6"
  • 我插入Mysql5的中文一直是乱码。但是直接使用mysqlAdmin,EMS等工具插入DB就不是乱码。而且我还可以使用程序正常地读出来。原因
  • 现在很多地方都需要用到关键词过滤功能。比如一般的服务器都不允许一些词出现在网页上，站长有时候会对在本网站发布信息的内容进行一个广告过滤等。雨
  • 作为设计师，我们都知道，一个极简的设计可以实现漂亮的效果。然而，很多设计师在实现上有些麻烦：要么是没有时间让使用如此少的元素制作的页面看起来
  •   今天编ZBlog上传模块的时候，需要用到一个提取文章中文件名的子程，开始我把问题想复杂了，匹配了所有可能的文件名，不仅正则表达
  • 上文：栅格:从混乱到秩序Jacci Howard Bear 的英文原文：http://desktoppub.about.com/od/gri
  • 以下介绍用数据库实现简单计数器，功能实现统计网站每日访问，每周访问及总访问量的统计，使用js调用下面存为count.asp<％&nbs
  • 很久没有更新blog了，这段时间实在是发生了很多的事，累身累心。但还是有很多想做的事，比如更新merceCSS、把一直以来所总结的有关模块化
  • 如何在ADO服务器端利用好缓存技术？请看下面示例，这是一个用来显示图书分类的例子程序：displayBooks.asp< ％
  • 1.字符串函数 长度与分析用 datalength(Char_expr) 返回字符串包含字符数,但不包含后面的空格 substring(ex
  • 用ACCESS数据库开发的网站,当随着网站数据量的不断增长.数据库的容量也是不断加大.这让ASP程序速度直线下降.如果才能让ACCESS数据
  • 相对于Firefox2来说，Firefox3除了采用全新的Gecko 1.9引擎外，在性能、稳定性和安全性方面进行许多改进，在我们最关心的对
  • 当鼠标移动上去后，字慢慢的变大的 效果应该 如果实现啊<!DOCTYPE html PUBLIC "-//W3C//DTD
  • 当我想要完美的使用:nth-child或者:nth-of-type的时候有点儿头晕。你越理解它们，就能写出越好的CSS规则！在这些简单的”秘
  • 流动网页设计有很多好处，但也只有在正确使用的时候。合适的技巧会使页面在大屏幕、小屏幕抑、ＰＤＡ小屏幕上都能得到良好的呈现。但是，糟糕的代码结
  • button元素在过去一直没有被重视，其实它比<input type="button">的语义强许多，制定性
  • 技巧1XmlNode.InnerText与.InnerXml的区别是：前者将内容中的<和>分别变成<和>，因此，希望
  • FLV在线转换，是目前主流播客网上通用的一种视频解决方案需要用到的组件 ASPExecmencoderffmpeg.exe第一步骤： 在线转
  • 错误代码错误消息说  明ASP0100Out of memory内存不足（不能分配要求的内存）ASP0101Unexpected
  • 07年，我是极力推崇网站规范制作，好处很多，对商业，对用户，对设计师。我们走了两年，现在有了一定的成效，我们也看到了规范所带来的好处和便利。
手机版 网络编程 asp之家 www.aspxhome.com