1.如何判斷一個元素是否出現(xiàn)在窗口可視范圍（瀏覽器的上邊緣和下邊緣之間，肉眼可視）。寫一個函數(shù) isVisible實現(xiàn)
<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)：元素未出現(xiàn)在視野中；
- windowHeight + scrollTop >= offsetWidth：元素開始出現(xiàn)在視野中；
- scrollTop >= offsetWidth + 元素自身的高度($node.height())：元素開始消失。
2.當(dāng)窗口滾動時，判斷一個元素是不是出現(xiàn)在窗口可視范圍。每次出現(xiàn)都在控制臺打印 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.當(dāng)窗口滾動時，判斷一個元素是不是出現(xiàn)在窗口可視范圍。在元素第一次出現(xiàn)時在控制臺打印 true，以后再次出現(xiàn)不做任何處理。用代碼實現(xiàn)
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.如何判斷瀏覽器滾動到了最底部？
視窗的高度 + 窗口滾動的高度 >= 整個文檔的高度時，頁面達(dá)到最底端。
$(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.圖片懶加載的原理：
懶加載的意義：
當(dāng)有很多圖片要加載時，我們需要將頁面內(nèi)未出現(xiàn)在可視區(qū)域內(nèi)的圖片先不做加載， 等到滾動到可視區(qū)域后再去加載。這樣可以減輕服務(wù)器負(fù)擔(dān)，提升用戶體驗。
實現(xiàn)原理：
在頁面載入時，先將img標(biāo)簽的“src”設(shè)為空或一個占位圖片，當(dāng)頁面滾動時，遍歷所有圖片，判斷當(dāng)其出現(xiàn)在窗口視野中時，再把正確的src賦給img相應(yīng)的標(biāo)簽。
6.實現(xiàn)一個簡單的懶加載：
7.瀑布流的實現(xiàn)原理：
- 瀑布流布局要求要進(jìn)行布置的元素等寬，然后計算元素的寬度與瀏覽器寬度之比，得到需要布置的列數(shù)；
- 創(chuàng)建一個數(shù)組，長度為列數(shù)，里面的值為已布置元素的總高度（最開始為0）；
- 然后將未布置的元素依次布置到高度最小的那一列，就得到了瀑布流布局。
