1.如何判断一个元素是否出现在窗口可视范围（浏览器的上边缘和下边缘之间，肉眼可视）。写一个函数 isVisible实现

<body>
<ul class="ct">
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
        <li>item 4</li>
        <li>item 5</li>
        <li>item 6</li>
        <li>item 7</li>
        <li>item 8</li>
        <li>item 9</li>
        <li>item 10</li>
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
        <li>item 4</li>
        <li>item 5</li>
        <li>item 6</li>
        <li>item 7</li>
        <li>item 8</li>
        <li>item 9</li>
        <li>item 10</li>
        <li class="middle">hello world</li>
    </ul>

<script>
function isVisable($node){
   var scrollTop = $(window).scrollTop();
   var windowHeight = $(window).height();
   var offsetWidth = $node.offset().top;
  
   if(offsetWidth < windowHeight + scrollTop){
     console.log('true');
   } else {
     console.log('false');
     }
}
var a = $('li').eq(3);
isVisable(a);  //"true"
isVisable($('.middle'));  //"false"
</script>
</body>

窗口高度（windowHeight） + 垂直滚动距离(scrollTop) <= 元素到页面顶端的距离(offsetWidth)：元素未出现在视野中；
windowHeight + scrollTop >= offsetWidth：元素开始出现在视野中；
scrollTop >= offsetWidth + 元素自身的高度($node.height())：元素开始消失。

2.当窗口滚动时，判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true 。

<script>
function isVisable($node){
   var scrollTop = $(window).scrollTop();
   var windowHeight = $(window).height();
   var offsetWidth = $node.offset().top;
  
   if(offsetWidth < windowHeight + scrollTop){
      return true;
    } else {
      return false;
      }
}
$(window).on('scroll',function(){
   if(isVisable($node)){
       console.log('true');
   }    
})
</script>

3.当窗口滚动时，判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true，以后再次出现不做任何处理。用代码实现

function isVisable($node){
   var scrollTop = $(window).scrollTop();
   var windowHeight = $(window).height();
   var offsetWidth = $node.offset().top;
  
   if(offsetWidth < windowHeight + scrollTop){
      return true;
    } else {
      return false;
      }
}

var toggle = 0;
$(window).on('scroll',function(){
    if(isVisable(a) && !toggle){
        console.log('true');
        toggle = 1;
    }
});

4.如何判断浏览器滚动到了最底部？

视窗的高度 + 窗口滚动的高度 >= 整个文档的高度时，页面达到最底端。

 $(window).on('scroll',function(){
     var scrollTop = $(window).scrollTop();
     var windowHeight = $(window).height();
     var docHeight = $('body').height();
    
    if(Math.ceil(windowHeight + scrollTop) >= docHeight){                    console.log('到底了');
    }  
  });

5.图片懒加载的原理：

懒加载的意义：
当有很多图片要加载时，我们需要将页面内未出现在可视区域内的图片先不做加载，等到滚动到可视区域后再去加载。这样可以减轻服务器负担，提升用户体验。
实现原理：
在页面载入时，先将img标签的“src”设为空或一个占位图片，当页面滚动时，遍历所有图片，判断当其出现在窗口视野中时，再把正确的src赋给img相应的标签。

6.实现一个简单的懒加载：

懒加载
 js代码

7.瀑布流的实现原理：

瀑布流布局要求要进行布置的元素等宽，然后计算元素的宽度与浏览器宽度之比，得到需要布置的列数；
创建一个数组，长度为列数，里面的值为已布置元素的总高度（最开始为0）；
然后将未布置的元素依次布置到高度最小的那一列，就得到了瀑布流布局。

8.瀑布流的简单实现：

瀑布流
 代码

图片懒加载与瀑布流布局