什么是圖片的滾動加載
當(dāng)訪問一個(gè)頁面的時(shí)候铐伴，先把img元素或是其他元素的背景圖片路徑替換成一個(gè)1*1大小的圖片路徑，這樣做頁面只需要請求一次，只有當(dāng)圖片出現(xiàn)在瀏覽器的可視區(qū)域內(nèi)，讓圖片顯示出來，這就是圖片懶加載妻柒。
圖片懶加載主要是緩解瀏覽器的壓力，增強(qiáng)用戶體驗(yàn)耘分。
實(shí)現(xiàn)原理
img標(biāo)簽是通過src屬性來獲取圖片举塔，我們可以自定義一個(gè)屬性，用來存放img獲取圖片的路徑求泰。然后通過js央渣，檢查當(dāng)前圖片，判斷圖片是否出現(xiàn)在用戶視野中渴频，如果出現(xiàn)在用戶視野中芽丹，就用真實(shí)的圖片地址，來替代默認(rèn)的圖片地址
瀑布流布局實(shí)現(xiàn)原理
瀑布流卜朗，又稱瀑布流式布局拔第。目前比較流行的一種布局方式咕村，視覺效果表現(xiàn)為參差不齊的多欄布局，隨著頁面向下滾動蚊俺，這種布局還會不斷加載數(shù)據(jù)懈涛，并附加至當(dāng)前尾部。
首先瀑布流布局泳猬，所有的圖片寬度保持一致批钠，高度由內(nèi)容決定。
通過絕對定位的方法來動態(tài)的設(shè)置它的top和left的值暂殖，就可以實(shí)現(xiàn)瀑布流价匠。
通過獲取到(父容器的寬度/小盒子的寬度） 獲得列數(shù)
定義一個(gè)記錄每列高度的數(shù)組当纱，列數(shù)就是數(shù)組的長度呛每。初始值為0.
遍歷數(shù)組，查找數(shù)組中的最小元素(列高最小值)以及他的索引坡氯，將下一個(gè)元素放到對應(yīng)的位置晨横，父容器的top = 列高最低的高度，距離父容器的left = 每列的寬度 * 最小列高值的索引箫柳。
擺放好元素手形，更新位置高度，重新遍歷數(shù)組悯恍，重復(fù)上一步操作库糠，直至元素排列完成。
