位置: 编程技术 - 正文

详解javascript实现瀑布流绝对式布局(js实例教程)

编辑:rootadmin

推荐整理分享详解javascript实现瀑布流绝对式布局(js实例教程),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:javascriptjs,js实例教程,javascript详细介绍,javascriptz,js实例教程,javascript+,,js实例教程,内容如对您有帮助,希望把文章链接给更多的朋友!

瀑布流也应该算是流行几年了吧。首先是由Pinterest掀起的浪潮,然后国内设计如雨后春笋般,冒出很多瀑布流的例子,比如,蘑菇街,Mark之(不过最近涉黄,好像被喝茶了),还有淘宝的 “哇哦”. 这些都是很棒的例子, 今天我们就聊一聊瀑布流。一、绝对式布局:

JS实现原理

其实瀑布式主要的难点就在于,如果将图片整齐的排列在对应的列下,以及什么时候开始刷新加载图片。 而图片整齐的排列的主要逻辑和算法即,先获取容器内可以放多少列,然后,通过计算,存放第一列的高度,再遍历剩下(除第一列的元素)的高度,分别放入,高度最小的那一列。 逐个添加,最后结束遍历。开始刷新的设置就很简单了,瀑布流刷新只和一个事件有关,即,window.onscroll. 主要的算法即,当页面滑动到最低高度的时候开始加载节点并且添加,当然,节点添加的个数是不固定的。先上代码吧,我这里分3部分讲解,一个是图片的排列,一个是设置加载的位置.另外再补充一个响应式加载。

1、图片排列

详解javascript实现瀑布流绝对式布局(js实例教程)

里面一共有7个函数(大函数),一个变量。 说一下思路吧。 首先,页面onload之后 执行的函数是 init. 要知道,一个js程序一定有他的入口,关键看你怎么找了。 然后我们深入init函数体,观察。init里面执行的业务逻辑就是 存储第一排元素的高度,然后重排剩下的元素。 通过columns函数来获得当前窗口最多可以放下多少列,然后设置容器的居中(通过padding设置即可). 接下来,遍历pin的单元框,将第一排的元素高度存放在arrHeight数组里,将剩下的元素进行重排。 其他的函数觉得没什么讲解的必要了。 我们着重来看一下overLoad函数.2、overLoad

在overLoad里面有getIndex函数,获取最小高度的index,然后就可以设置传入进来的ele元素的位置(绝对定位), top为数组中最小高度的px值,left就为第一排制定的Index元素的左边距位置。 最后更新一下高度,ok!!! that's enough.3、设置加载位置

其实,精华就在上一部分,这个只是作为一个加载数据的手段,当然,你可以点击加载(手动触发),或者其他的加载方法。 当然,怎么设置完全是取决于你的。 所以,随大流,依然是通过下滑滚动加载。 继续,找入口函数->dealScroll. 该函数执行的任务就是,通过isload函数,判断是否可以进行加载判断。 我们看一下isload函数,这个就是滚动加载的关键点.

通过计算得出,页面底部距视口的位置(工具条下部) 与 最后一个元素的绝对位置比较,如果 滑动距离超过,则启用加载。yeah~ That's over.back to dealScroll接下来就是看加载的部分了,这个部分其实也没什么说的,就是创建一个div节点,然后将他放到容器的最后,并且通过overLoad函数来处理该节点的位置。 另外在该函数的末尾,我设置了一个控制滑动速度的trick,通过对函数的节流,防止有时候,请求过慢,用户重复发送请求,造成资源浪费。然后,这一部分也可以告一段落了。4、响应式最后一部分就是响应式了, 这部分,也超级简单,只要你封装性做的好,其实这一部分就是添加一个resize事件就over了。我们继续找入口函数。

同样,这里使用到了函数节流的思想,要知道,作为一个程序员,永远不要以为 用户 干不出什么 傻事. 比如,没事的时候拖着浏览器窗口玩,放大,缩小,再放大... 其实,这事我经常干,因为没有女朋友,写代码写累了,就拖浏览器玩。 所以,考虑到我们单身狗的需求,使用函数节流是非常有必要的。 感兴趣的童鞋,可以参考我前面的文章,进行学习。 说明一下,这里的回调函数指的就是init函数,但是 需要对init做些改动。详见。

上面需要加入update,对新的第一排元素进行更新。然后就可以直接搬过来使用即可。这就是绝对是布局的大部分内容了,关于javascript瀑布流另一种布局方式请参考下一篇文章《详解javascript实现瀑布流列式布局》。

详解javascript实现瀑布流列式布局 本文介绍了javascript瀑布流列式布局的相关内容,分享给大家供大家参考,具体内容如下JS原理上面说了,列式布局简直算是完虐绝对式布局.绝对式布局

JavaScript中eval函数的问题 今天看代码,遇到一个eval函数的问题,到现在翻了很多博文,还是不是很懂eval函数,有个一直没法理解的代码如下:/*varstart=[],end=[],timings=[];*/functionf(){/

javascript嵌套函数和在函数内调用外部函数的区别分析 我们都知道在函数中定义的局部变量在声明他的函数体以及其嵌套的函数内始终是有定义的,并且在函数的作用域链上始终会有个对象指向全局对象,

标签: js实例教程

本文链接地址:https://www.jiuchutong.com/biancheng/381689.html 转载请保留说明!

上一篇:理解Javascript文件动态加载(深入理解javascript)

下一篇:详解javascript实现瀑布流列式布局(javascriptz)

  • 一般纳税人是否可以开普票
  • 唐朝的两税法是什么
  • 金融债券的利息收入
  • 小企业会计准则调整以前年度费用分录
  • 国税 增值税
  • 进项税的现金流量项目
  • 工会经费免征三年需要申报吗
  • 牛奶 税率
  • 核算科目拨出专票怎么弄
  • 土地使用税怎么征收标准
  • 餐饮行业液化气使用标准
  • 跨年多计提社保个人部分怎么调整
  • 员工考试报名费计入什么科目
  • 公司没有员工需要缴纳社保吗
  • 增值税专用发票抵扣期限
  • 发票认证系统查不到发票
  • 苏州工会经费减半政策
  • 财税2010 121号文件是否作废
  • 湿租增值税税率多少
  • 外购货物用于职工福利企业所得税怎么调整
  • 结算会计和核算会计哪个更好
  • 个体工商户开9%的税需要什么
  • 汇算清缴补交的所得税会计分录
  • 代发工资开的发票可以抵扣吗?
  • 民非组织可以接受捐赠吗
  • 跨年发票能不能报销
  • 公司自建办公楼
  • wordpress使用
  • 房产开发企业涉及税种
  • 预计负债的概念是什么
  • 退休费用会计分录
  • 百家论坛是正规期刊吗
  • php面向对象是什么意思
  • 微信第三方登录信息修改
  • 增值税专用发票丢了怎么补救
  • 北京猿创源科技有限公司
  • 个人独资企业建筑类怎么注册
  • 工程项目会计怎么样
  • 神经网络模型是干嘛的
  • yii框架搭建
  • mysql崩溃日志
  • 哪些计入其他收益与营业外收入
  • 递延所得税资产和递延所得税负债
  • 公司如何减资
  • 预缴了增值税在申报增值税时申报
  • 用公司名义买的东西送礼需要归还么
  • 转出未交增值税会计处理
  • 暂估入账应该如何操作
  • 抵扣联过期时间
  • 人力资源外包服务包括哪些
  • 小规模个人所得税税率表2023年
  • 应交税费月底账务处理
  • 燃油费如何做账会计分录
  • 租赁公司账务科目
  • 单位交社保怎么取消居民医保
  • 钱汇错了报警有用吗
  • 债券发行费用的计算方法
  • 针对收入未申报的问题
  • 增值税专用发票的税率是多少啊
  • 房地产开发企业建造的商品房,在出售前
  • sqlserver高级教程
  • mysql+php
  • windowssystem32oobe找不到指定的路径
  • ubuntu里怎么装软件
  • windows开机显示正在清理
  • mac的icloud
  • linux i3桌面
  • sed 处理多行
  • cocos2dx引擎优化
  • pycharm打开文件怎么运行
  • socketdescriptor
  • macos moja
  • javascript生成随机整数
  • javascript面向对象编程指南
  • js实现网页收藏的方法
  • 房屋契税2013年收费标准
  • 江苏优抚对象
  • 建筑服务纳税人有哪些
  • 新疆医保哪里查
  • 重庆税务局app下载官网
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设