ajax瀑布流布局,懒加载 瀑布流布局
前几天星星零零的学习,终于搞定了懒加载和瀑布流布局,下面我们通过这篇文章一起学习和探讨一下~
懒加载
首先,什么是懒加载呢?原理?
其原理是:将图片的 src 设置为统一的一张默认图片 / loading图 / logo / 空白图片(这样做会使网络请求只有一条哦),可以将真实图片的 src 存储到 img 标签的自定义属性 data-src 中,当图片出现在用户视野 / 可视窗口中(需要展示出来)时,即将自定义属性 data-src 中 的地址替换 src 中的默认图片地址,达到懒加载的效果。
那这么做是为了什么呢?本质?
这个通过原理也很容易看出来,如果页面存在大量的图片,那并不是所有的图片在一开始的时候都要加载完毕,这样浏览器的压力太大了。所以懒加载的本质就是为了,缓解浏览器的压力,提升用户体验,防止页面一次性向服务器响应大量请求导致服务器响应慢,页面卡顿或崩溃等问题。
这里我们需要解决两个问题
1. 如何判断图片是否出现在用户的视野 / 可视窗口中?
上图!
判断元素是否出现.png
是否一目了然
判断一个元素是否出现在用户视野 / 可视窗口只需要判断是否
$view.height() + $view.scrollTop() >= $node.offset().top
即窗口的高度加上窗口滚动的距离是否大于等于元素距离容器顶部的距离,如果是,则该元素出现(需要加载),否则没有出现(不需要加载)
2. 如何加载图片?
这个问题在原理处就进行了阐述,可以将真实图片的 src 放到自定义属性 data-src 中,当判断图片出现在了可视窗口中,将自定义属性中的值拿出替换 img 标签的 src
或者我们可以将真实图片的 src 存储到数组中,通过下标访问
其实这之中还存在一些问题,比如
加载过的图片在 scroll 上去再次出现在可视窗口,不需要重复修改 src 了
这个问题我们同样可以在 img 标签中添加自定义属性标志该图片已经加载完毕 $node.attr('data-isLoaded', 1) ,然后在滚动触发加载图片时判断该图片是否已经加载完毕
同时给滚动事件设置函数节流,避免极短时间内很多重复执行
下面给出懒加载完整代码:
start()
var clock = null
$(window).on('scroll', function() {
if (clock) clearTimeout(clock)
clock = setTimeout(function() {
start()
}, 300);
})
function start() {
$('.container img').not('[data-isLoaded]').each(function() {
var $node = $(this)
if ( isShow($node) ) {
loading($node)
}
})
}
function loading($node) {
$node.attr('src', $node.attr('data-src'))
$node.attr('data-isLoaded', 1)
}
function isShow($node) {
return $node.offset().top <= $(window).height() + $(window).scrollTop()
}
瀑布流布局
蘑菇街网
瀑布流布局
看了上面两张截图,对瀑布流有没有一些认识呢?
其中的共同点是不是:固定宽度,高度不定,间隙均匀的各元素,一行中从左到右排列,一行排满之后,其余会按顺序排在最短的一列后
这样做有什么好处呢?
1、吸引用户
当用户在浏览瀑布流式布局的时候(这里抛开懒加载),用户会产生一种错觉,就是信息是不停的在更新的,这会激发用户的好奇心,使用户不停的往下滑动。
2.良好视觉体验
采用瀑布流布局的方式可以打破常规网站布局排版,给用户眼前一亮的新鲜感,用户在浏览内容时会感到很有新鲜感,带来良好的视觉体验。
3.更好的适应移动端
由于移动设备屏幕比电脑小,一个屏幕显示的内容不会非常多,因此可能要经常翻页。而在建网站时使用瀑布流布局,用户则只需要进行滚动就能够不断浏览内容。(这一点和懒加载有一点像)
那么瀑布流如何实现?原理?
简单的来说:
对需要瀑布流布局的元素绝对定位,其父元素position: relative。
通过计算父元素(窗口或者显示容器)宽度除以需要瀑布流布局的元素宽度得到瀑布流布局的列数,并对存储每列高度值的数组进行初始化
摆放元素时,比较每列高度,每次选取高度最低的一列摆放一个元素,通过设置元素css top 和 left
重复3直到元素全部摆放完毕
这里可以利用元素宽度及其包裹元素的外边距 $node.outerWidth(true) 来计算元素占据的全部宽度
下面是JS代码:
var colCount
var colHeightArray = []
var imgWidth = $('.waterfall img').outerWidth(true)
colCount = Math.floor($(window).width() / imgWidth)
for (var i = 0; i < colCount; i++) {
colHeightArray[i] = 0
}
$('.waterfall img').on('load', function() {
var minValue = colHeightArray[0]
var minIndex = 0
for (var i = 0; i < colCount; i++) {
if (colHeightArray[i] < minValue) {
minValue = colHeightArray[i]
minIndex = i
}
}
$(this).css({
left: minIndex * imgWidth,
top: minValue
})
colHeightArray[minIndex] += $(this).outerHeight(true)
})
改进:
var waterfall = {
init: function() {
this.clock = null
this.colHeightArray = []
this.imgWidth = $('.waterfall img').outerWidth(true)
this.colCount = Math.floor($(window).width() / this.imgWidth)
for (var i = 0; i < this.colCount; i++) {
this.colHeightArray[i] = 0
}
this.bind()
},
bind: function() {
var _this = this
$('.waterfall img').on('load', function() {
_this.layout($(this))
})
$(window).on('resize', function() {
if (_this.clock) clearTimeout(_this.clock)
_this.colCount = Math.floor($(window).width() / _this.imgWidth)
for (var i = 0; i < _this.colCount; i++) {
_this.colHeightArray[i] = 0
}
_this.clock = setTimeout(function() {
$('.waterfall img').each(function() {
_this.layout($(this))
})
}, 300);
})
},
layout: function($node) {
var minValue = this.colHeightArray[0]
var minIndex = 0
for (var i = 0; i < this.colCount; i++) {
if (this.colHeightArray[i] < minValue) {
minValue = this.colHeightArray[i]
minIndex = i
}
}
$node.css({
left: minIndex * this.imgWidth,
top: minValue
})
this.colHeightArray[minIndex] += $node.outerHeight(true)
}
}
waterfall.init()
应用:瀑布流新浪新闻
waterfall-sinaNews
要如何实现这个效果呢?
我们在这里理一下思路
首先
页面第一次加载:
1.ajax发送 page = 1 perPageCount = 10 请求获取数据
2.将请求到的数据拼接成 dom 放到页面中
3.使用瀑布流布局去摆放元素
4.page++
滚动到底部
再次加载数据
1.ajax发送page perPageCount 请求获取数据
2.将请求到的数据拼接成 dom 放到页面中
3.使用瀑布流布局去摆放元素
4.page++
这里我们需要知道,怎么判断是否到达底部了?
判断是否到达底部.png
从图中我们得知,当到达底部时
$view.height() + $view.scrollTop() = $content.height()
所以我们可以利用
$view.height() + $view.scrollTop() +20px >= $content.height()
判断是否到达了底部,需要再次请求数据加载数据了
ajax瀑布流布局,懒加载 瀑布流布局相关推荐
- 纯JS实现懒加载+瀑布流布局
瀑布流布局一般用于图片布局,其视觉表现为参差不齐的多栏布局,随着页面的滑动,会不断加载新的图片. 懒加载主要用于实现提高系统的响应速度.对于图片比较多的网页,如果一次性加载出所有的图片,会导致系统的加 ...
- uniapp实现瀑布流懒加载实现和无限上拉加载更多
效果图: 说明: 函数说明:传入一个数组,循环获取图片高度,会根据把原数组拆分成两个数组,放在两列, 计算单列累计高度,对比高度值的大小,实现瀑布流的布局, ...
- AJAX+json+jquery实现预加载瀑布流布局
AJAX+json+jquery实现预加载瀑布流布局 转载于:https://www.cnblogs.com/zhujiabin/p/4860954.html
- 微信小程序双瀑布流布局+动态懒加载
效果图 实现代码: 思路: 将双瀑布流分为left.right两个数据流,通过动态获取两边数据的动态高度来进行判断,下一条数据插入低的一方. 因为用户所上传图片高度不一致,所以image的mode属性 ...
- 基于jquery响应式网站图片无限加载瀑布流布局
分享一款效果非常酷的jQuery瀑布流布局无限加载图片效果.整个页面采用响应式布局,图片采用jQuery.Lazyload延时加载技术,提升整个页面的加载速度.效果图如下: 在线预览 源码下载 实 ...
- 懒加载、瀑布流和LightBox实现图片搜索效果
开始 做一个小项目,算是对js和jQuery的一次练习吧. 图片资源来自这个网站(上面有很多高清图片关键还是免费下载的): https://unsplash.com/ 项目具体效果可以点这里: htt ...
- 【Web技术】1206- 如何设计一款支持懒加载的瀑布流组件?
前言 瀑布流布局算是一种比较流行的布局,参差不齐的多列结构,不仅能节省空间,还能在视觉展示上错落有致不拘一格.在一次业务需求中,找了几个开源的瀑布流组件,在使用的过程中总会有点小问题,便开发了此组件. ...
- 分页组件change_javascript原生瀑布流+图片懒加载组件
我不是天使:javascript原生手动分页组件zhuanlan.zhihu.com 我不是天使:javascript原生自定义轮播图组件zhuanlan.zhihu.com 一大早就去办签证,啦 ...
- js实现审批流_小程序瀑布流组件:支持翻页与图片懒加载
电商小程序中,用到瀑布流的地方非常多,每次都写一个瀑布流,重复一次逻辑,作为程序员,肯定是非常不愿意的. 瀑布流的形式都是大同小异,不同的是瀑布流中每个模块的内容,随业务而变化. 所以,我们把瀑布流框 ...
最新文章
- python源码精要(10)-python源代码阅读概要(1)
- 自动Mock,让编写单元测试更简单
- 创业成功需早起?看看IT大佬们的作息时间
- R6饮料AK赛(NOIP模拟赛)/省选专练HDU 5713 K个联通块
- 二维数组的最大联通子数组和
- 原生js更改html,原生js更改css样式的两种方式
- (TOJ1224)数据结构练习题——后序遍历二叉树
- 自学c语言每天一小时,昨天学习C语言第五天, 自学失败的一天
- linux plc编程软件安装,西门子PLC编程软件S7-200 v4.0.8官方版
- win10小课堂:必须掌握的十个电脑使用技巧
- 匈牙利算法【匹配问题】
- msi笔记本u盘装linux,msi微星笔记本bios设置u盘启动教程
- 区块链共识算法及应用研究
- 计算机人工智能分数,分数一般想学人工智能?这6所双一流大学是首选
- Python+pyqt+dicom+vtk 使用pyinstaller打包软件时正常,运行报错vtkmodules.all、pydicom.encoders.pylibjpeg等错误
- 使用正则表达式 匹配 HTML 标签内的内容
- 【Daily Games——开发篇】:类QQ飞车商城的试衣间模块
- 《Android Studio开发实战》学习(一)- Hello World
- [Canvas系列]Canvas绘制圆弧形状_04
- 【老生谈算法】matlab绘制心形曲线的程序源码——心形曲线
热门文章
- gitflow使用指南
- 7 在UML中,( )展现了运行时处理结点以及其中构件(制品)的配置,给出了体系结构的静态视图
- transferto方法的应用_NIO的transferTo方法
- Kubernetes基于extended-resource扩展资源
- 世界各国的会计年度、记账本位币
- 4.python蓝桥杯模拟题 一个包含有2019个结点的有向图,最多包含多少条边?(不允许有重边)
- 7天人工智能训练营,带你玩转机器学习与神经网络算法!(含6大实战练习,限200人)...
- 自然语言处理(NLP)算法学习路线!
- mariadb mysql同步_MariaDB(mysql)之主从同步
- 亚马逊自养号测评Listing优化原则