jquery瀑布流布局

http://www.sitejs.cn/code/down/jsdmview/waterfall/这里也有一个瀑布流效果，但个人觉得效果不好。

它的排版原理是先统计多少列，然后生成一排DIV。然后统计这排DIV的高度来分配图片的方法。开始加载感觉不出问题来。如果窗口变化几次排序就会乱了，打乱原有节点的排序，而且它是直接修改了原有节点结构，渲染过程中很卡甚至卡死。

JQUERY瀑布流原理：我觉得应该保持原有节点不要更改，只修改图片的div坐标位置达到排序功能。

方法：每次排版取前一排最低的位置接着排，窗口改变后先计算一下列数有没有发生变化，变化后才重排。每张图片的位置也比较一下有没有发生变化，变化后才重排，这点优化对窗口变化后非常有效。如果图片加载过程中，窗口发生变化，我们是没有立刻执行重排动作，因为重排的条件是必须全部图片已经加载并渲染完毕。所以当加载过程中发生窗口变化，先记录下来，等加载完后再处理。还有如果图片地址出错将终止排序功能，为了解决这问题我们准备好一张错误提醒图片来替换它。

查看效果：http://down.scscms.com/scs/waterfall/index.html代码写得比较仓促，可能存在一些没想到的情况，优化方面应该还可改进。有待更进！

改进版本：http://down.scscms.com/scs/waterfall/index2.html 主要改进是图片统一加载完后，一起做动画。

关键词: 瀑布流布局,瀑布流,jquery   编辑时间: 2013-08-24 21:27:57

• 

  0

  高兴
• 

  1

  支持
• 

  0

  搞笑
• 

  1

  不解
• 

  1

  谎言
• 

  0

  枪稿
• 

  0

  震惊
• 

  0

  无奈
• 

  0

  无聊
• 

  0

  反对
• 

  0

  愤怒