效果圖:
說明:函式說明:傳入乙個陣列,迴圈獲取高度,會根據把原陣列拆分成兩個陣列,放在兩列,
計算單列累計高度,對比高度值的大小,實現瀑布流的布局,
由於獲取高度需要一定的時間,所以使用async await 阻塞for 迴圈的程序,
每獲取到乙個的高度就賦值渲染到頁面上,實現載入出乙個就先渲染上去,達成懶載入的效果
引數說明:
必填:arr:陣列,裡面有物件,對比物件裡面的高度,返回兩個陣列
attributename:要根據陣列裡物件指定屬性名稱(的 key)
非必填:
otherheight:瀑布流的盒子其它組成部分的高度,例如點讚那行,因為瀑布流不單單是組成
minheight: 最小高度,如果沒有,也會使用最小高度,相當於預設高度
maxheight:最大高度,超出高度就按照 maxheight 進入當前列累計高度
**:
}
}
}}
}
}很遺憾您的審核未通過
審核未通過原因:}返回
HTML CSS JS 瀑布流式布局(實現懶載入)
首先來說一下瀑布流的原理吧 瀑布流是許多資料塊組成的,可以是,可以是div,但是它們都有乙個特點,就是等寬不等高,正是因為它等寬不等高,所以如果按部就班的排布的話,才會出現很大的縫隙,特別不好看,說白了瀑布流布局就是充分利用之間的空隙來合理的布局,使布局看起來好看。首先上css布局 因為個人喜歡比較...
QTableWidget懶載入(動態載入)實現
在qtablewidget中加入一行行的資料,如果資料數量過多,滾動起來就會卡頓,插入資料時也會影響效能,為了解決這個問題,採用懶載入的方式,只在介面上顯示10幾條資料,填滿介面。同時增加而外的豎直滾動條,控制滾動條滑塊的大小,給外界看到的效果就是有隨著資料數量的增加,滾動條減小。滾動滾動條,或者插...
瀑布流實現
html 瀑布流效果 瀑布流效果 瀑布流效果 瀑布流效果 瀑布流效果 瀑布流效果 瀑布流效果 瀑布流效果 瀑布流效果 瀑布流效果 js 一定要用window.onload不能用 function var data window.onload function pbl pbl function pbl...