懒加载与瀑布流

懒加载原理

当打开一个有很多图片的页面时，先只加载页面上看到的图片，等滚动到页面下面时，再加载所需的图片。这就是图片懒加载。
设置图片src属性为同一张图片，同时自定义一个data-src属性来存储图片的真实地址
页面初始化显示的时候或者浏览器发生滚动的时候判断图片是否在视野中
当图片在视野中时，通过js自动改变该区域的图片的src属性为真实地址

瀑布流原理

先通过计算出一排能够容纳几列元素，然后寻找各列之中所有元素高度之和的最小者，并将新的元素添加到该列上，然后继续寻找所有列的各元素之和的最小者，继续添加至该列上，如此循环下去，直至所有元素均能够按要求排列为止；

判断元素出现在用户视野

当元素在页面中的位置小于浏览器高度或者元素容器高度和用户滚动的高度时，可以得到元素出现在用户视野

$('元素').offset().top <= $(window).height() + $(window).scrollTop()

判断浏览器滚动到最底部

和判断元素是否出现在用户视野中的做法是一样的；

页面的高度 $('body').height();

用户滚动的距离 $(window).scrollTop()

浏览器的高度 $(window).height()
当浏览器的高度 + 用户滚动的距离 = 页面的高度 我们可以判断浏览器滚动到最低部了

if($(window).height() + $(window).scrollTop() = $('body').height()) {
      console.log('到达浏览器底部')

简单实现懒加载

懒加载

简单实现瀑布流

瀑布流