瀑布流布局

图片懒加载

图片都是一个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）

类型：布尔值

一个布尔值，指示是否在计算中包含元素的边距。
瀑布流答疑
瀑布流新闻站
如何实现一边下拉，一边展现
实现思路

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

实现步骤

获取数据
把数据拼接成dom放到页面上
使用瀑布流去摆放dom 位置
获取10条数据
把10条数据拼接成dom放到页面上
使用瀑布流去摆放dom 位置
page++

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

获取page =2 的10条数据
把10条数据拼接成dom放到页面上
使用瀑布流去摆放dom 位置
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("我是有底线的") ;
                        }
                });  
            });  

img中alt的属性
如果无法显示图像，浏览器将显示替代文本，就像这样：
实现课程中的瀑布流布局
this
当在其他函数上调用init()的函数或者参数的时候的时候，记得加上_this，否则将无法实现调用函数
let
ES6 新增了let命令，用来声明局部变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效，而且有暂时性死区的约束。