位置: 编程技术 - 正文
推荐整理分享解析javascript瀑布流原理实现图片滚动加载(js解析url参数的方法),希望有所帮助,仅作参考,欢迎阅读内容。
文章相关热门搜索词:jsoup解析script,js解析blob,javascript解析引擎,jsurl解析,js解析url参数的方法,js解析protobuf,js解析protobuf,javascript解析引擎,内容如对您有帮助,希望把文章链接给更多的朋友!
先科普下瀑布流吧
瀑布流,又称瀑布流式布局。是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest,逐渐在国内流行开来。国内大多数清新站基本为这类风格,像美丽说、淘宝网都有使用。
这是我实现的一个效果,就是怎么滚动都加载不玩。就跟瀑布一样流啊流!
这里的实现方式我们只说Js实现方法
实现原理:
对容器中已有数据块元素进行第一次计算1 容器总宽度 2 列宽度 3 最小列数 ,得到列数后,用一个数组存放盒子所有高度,找出最小高度。之后根据序列号更新高度;看着有些拗口,实现起来就很简单了。
对于滚动加载:即滚动到哪个高度后,需要去加载数据,其实这个就是列的最小高度值,这样当前滚动值和最小高度值比较一下即可判断出来,是否要触发加载数据;就是写一个函数,用来判断是否达到加载图片条件,如果达到,就开始加载。比如获得最后一张图片的offsetTop,可视区高度,滚动距离,也就是当图片的offsetTop小于可视区高度和滚动距离之和的情况下,此时就应该加载了,不过条件可以随便定,也可以等滚动到图片的一半时候在触发加载条件,如图所示:
先上HTML CSS代码
JS代码,每行都有注释
标签: js解析url参数的方法
本文链接地址:https://www.jiuchutong.com/biancheng/377481.html 转载请保留说明!友情链接: 武汉网站建设