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.实现一个简单的懒加载：
7.瀑布流的实现原理：
- 瀑布流布局要求要进行布置的元素等宽，然后计算元素的宽度与浏览器宽度之比，得到需要布置的列数；
- 创建一个数组，长度为列数，里面的值为已布置元素的总高度（最开始为0）；
- 然后将未布置的元素依次布置到高度最小的那一列，就得到了瀑布流布局。
