jquery瀑布流布局

稿件来源: 阳光企业网站管理系统   撰稿作者: 太阳光   发表日期: 2013-4-3   阅读次数: 272   查看权限: 游客查看

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-8-24 21:27:57

  • 感到高兴

    0

    高兴
  • 感到支持

    0

    支持
  • 感到搞笑

    0

    搞笑
  • 感到不解

    1

    不解
  • 感到谎言

    0

    谎言
  • 感到枪稿

    0

    枪稿
  • 感到震惊

    0

    震惊
  • 感到无奈

    0

    无奈
  • 感到无聊

    0

    无聊
  • 感到反对

    0

    反对
  • 感到愤怒

    0

    愤怒
100%(1)
0%(0)
共有0 条评论 发言请遵守【相关规定

网友评论

会员头像
发 表同步腾讯微博  匿名评论  验证码:  点击更新
  • 暂无评论
关闭模块文章图片 article Pictrue
  • 代码覆盖率工具 Istanbul 入门教程
  • 全栈工程师的武器——MEAN
  • 9款超炫的 CSS3 复选框(Checkbox)
  • 微信开发在线翻译功能
  • CSS3那些不为人知的高级属性
  • 给easyui的datebox添加清空事件
  • flash写字效果
  • kendoUI系列教程之DropDownList下拉菜单
  • kendoUI系列教程之datetimepicker日期时间选择
  • kendoUI系列教程之datepicker日期选择
  • kendoUI系列教程之combobox下拉列表框
  • kendoUI系列教程之colorpicker
  • kendoUI系列教程之calendar日历表
  • kendoUI系列教程之autocomplete自动补齐
  • kendo ui简介
  • QQ登录网站实战教程