原生 懶載入

2021-09-25 17:34:26 字數 1198 閱讀 4391

1、公共檔案

var utils=(function ()  ,

//顏色隨機

randomcolor:function() ;

return col ;

} ,}})();

2、邏輯分解

/* 

1| 建立ul、li,建立指定數量的li,並且做浮動,設定li的寬度

2| 建立乙個陣列,這個陣列裡面是統計每個li的當前高度

3| 建立,載入,設定寬度,獲取高度

4| 尋找陣列中最小高度的索引值,在li中找到這個索引值對應的列

5| 將載入進來的放入在這個列中,並且累加高度,儲存在陣列中對應的元素中

6| 繼續載入新的,載入當數量都完成時,讓數值歸3

*/

3、準備工作-定義

let  = utils ;  //解構賦值

var bodywidth , //內容寬度

colwidth , //每一列的寬度

ul ,

img ;

var minheight = , //最小高度陣列

position = 3 ; //定義名首位字元

const col = 5 , //規定列數

margin = 10 ; //定義li間距的常量

4、**實現

原生懶載入與無限滾動

scrollheight 指元素的總高度,包含滾動條中的內容。唯讀屬性。不帶px單位。就是下圖中,54條資料的高度,但是因為有滾動條,所以螢幕看不到這麼高 scrolltop 當元素出現滾動條時,向下拖動滾動條,內容向上滾動的距離。可讀可寫屬性。不帶px單位。如果該元素沒有滾動條,則scrollto...

mysql懶載入 mybatis懶載入

1.概念 懶載入就是按需載入,我們需要什麼的時候再去進行什麼操作。而且先從單錶查詢,需要時再從關聯表去關聯查詢,能很大提高資料庫效能,因為查詢單錶要比關聯查詢多張表速度要快。在mybatis中,resultmap可以實現高階對映 使用association collection實現一對一及一對多對映...

路由懶載入與元件懶載入

一 為什麼要使用路由懶載入 為給客戶更好的客戶體驗,首屏元件載入速度更快一些,解決白屏問題。二 定義 懶載入簡單來說就是延遲載入或按需載入,即在需要的時候的時候進行載入。三 使用 常用的懶載入方式有兩種 即使用vue非同步元件 和 es中的import 1 不用懶載入,vue中路由 如下 impor...