瀑布流与懒加载

图片懒加载

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

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

图片懒加载的作用

作用： 缓解网络压力，使得用户体验更好

img缓存机制

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

图片的懒加载的问题

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

如何加载这个图片

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

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

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

###滚动的高度的判断

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

$(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命令所在的代码块内有效，而且有暂时性死区的约束。