瀑布流

图片懒加载

图片都是一个loading的加载状态

举例:瞬间,互联网要获取20张网络图片的请求,稍等片刻之后,并不是一开始就展示所有的图片,滚动哪里就加载几张图片

图片懒加载的作用

作用: 缓解网络压力,使得用户体验更好

img缓存机制

图片懒加载如何展现的呢,img指向一个图片,其它的img也只是加载加载这个图片,其它的图片片加载的时候,直接从缓存里面进行加载

图片的懒加载的问题

  • 如何判断图片是否出现在我们的视野当中
  • 如何加载这个图片

如何加载这个图片

在img标签中把data-src里面的值放到src这个属性上面

如何判断一个元素是否出现在我们的视野中呢

1.窗口的高度
2.滚动的距离
3.元素相当于顶点之间的距离

滚动的高度的判断

$(window).height() = $(window).scrollTop + $(node).offset().top()
img1

$(node).offset()出现问题

可能是没有清除浮动

图片懒加载的优化

已经加载的图片可以添加isLoaded = true 这个属性,然后选择器判断的时候可以过滤一下有这个属性的元素

$().not('[data-isloaded]').each(function(){
    
})

瀑布流布局

  • 宽度相等,高度不相等

语言描述: 设置一个数组,每当放一个元素到数组中的一个元素的时候,该元素的高度更新,在下一次放入元素当中的时候,需要进行比较每一列的高度,选择高度最小的一个元素插入这个数组。

代码描述:

placeholder.com

生成的测试图片

.outerWidth([includeMargin])

includeMargin(默认值:false)
类型:布尔值
一个布尔值,指示是否在计算中包含元素的边距。

瀑布流答疑

瀑布流新闻站

如何实现一边下拉,一边展现

实现思路

  1. 假设功能已经实现了,然后把功能一个一个拼接起来
  2. 直接把一步一步地写

实现步骤

  1. 获取数据

  2. 把数据拼接成dom放到页面上

  3. 使用瀑布流去摆放dom 位置

  4. 获取10条数据

  5. 把10条数据拼接成dom放到页面上

  6. 使用瀑布流去摆放dom 位置

  7. page++

当页面滚动(或者某个条件下)

  1. 获取page =2 的10条数据
  2. 把10条数据拼接成dom放到页面上
  3. 使用瀑布流去摆放dom 位置
  4. page++

简述图片懒加载的实现原理

原理:先将img标签中的src链接设为同一张图片(空白图片),将其真正的图片地址存储在img标签的自定义属性中(比如data-src)。当js监听到该图片元素进入可视窗口时,即将自定义属性中的地址存储到src属性中,达到懒加载的效果。
这样做能防止页面一次性向服务器响应大量请求导致服务器响应慢,页面卡顿或崩溃等问题。

简述瀑布流布局的实现原理

瀑布流布局由pinterest.com网站首创,它的原理是:先通过计算出一排能够容纳几列元素,然后寻找各列之中所有元素高度之和的最小者,并将新的元素添加到该列上,然后继续寻找所有列的各元素之和的最小者,继续添加至该列上,如此循环下去,直至所有元素均能够按要求排列为止

木桶效应

木桶效应
假设我们手里有20张照片,这些照片可以在保持宽高比的情况下进行放大或者缩小。选定一个基准高度比如200px

  • 拿第1张照片,锁定宽高比高度压缩到200px,放到第一行
  • 拿第2张照片,高度压缩到200px,放到第一行,图片1的后面
  • ...
  • 拿第5张照片,高度压缩到200px,放到第一行。oh,不好,空间不够,放不下了
  • 把前面水平依次排放好的4个图片当成一个整体,等比拉伸,整体宽度正好撑满容器
  • 第5张照片从下一行开始,继续...
    以上,就是木桶布局的原理。

如何判断元素出现在用户视野?

窗口的高度 + 滚动的距离 ?= 元素相当于顶点之间的距离

$(window).height() = $(window).scrollTop + $(node).offset().top()

如何判断一个浏览器滚动到底部

 $(function() {  
                var winH = $(window).height(); //页面可视区域高度  
                $(window).scroll(function() {  
                    var pageH = $(document.body).height(); //整个网站页面总高度 
                    var scrollH = $(window).scrollTop(); //滚动条高度  
                    var differ = (pageH - winH - scrollH) //差值;  
                        if (differ < 0.02) { //代表滚到条已经到底 
                                 alert("我是有底线的") ;
                        }
                });  
            });  

实现课程中图片懒加载的效果

任务1

实现课程中瀑布流布局效果

任务二

img中alt的属性

如果无法显示图像,浏览器将显示替代文本,就像这样:

实现课程中的瀑布流布局

this

当在其他函数上调用init()的函数或者参数的时候的时候,记得加上_this,否则将无法实现调用函数

let

ES6 新增了let命令,用来声明局部变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效,而且有暂时性死区的约束。

你可能感兴趣的:(瀑布流)