溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹怎么基于JavaScript實現無限加載瀑布流，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
本文實例為大家分享了JS實現無限加載瀑布流展示的具體代碼，供大家參考，具體內容如下
1.在外層的div中，插入4個ul，ul左浮動
2.每次在創建節點之后，插入節點之前，要獲取每個ul的高度，找到最小的高度，然后將新創建的li節點插入該ul中
3.當文檔的高度 - 文檔的可視高度 <= 鼠標的滑動距離時 開始繼續創建節點
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>瀑布流效果動態加載</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#content {
width: 1000px;
border: 3px solid red;
margin: 0 auto;
overflow: hidden;
}
#content > ul {
width: 240px;
padding: 4px;
border: 1px solid blue;
float: left;
list-style-type: none;
}
#content > ul > li {
background-color: yellow;
font-size: 100px;
color: white;
text-align: center;
margin-bottom: 5px;
}
</style>
</head>
<body>
<div id="content">
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
</div>
</body>
<script type="text/javascript">
//隨機[m,n]之間的整數
function randomNumber(m, n) {
return Math.floor(Math.random() * (n - m + 1) + m);
}
//隨機顏色
function randomColor() {
return "rgb(" + randomNumber(0, 255) + "," + randomNumber(0, 255) + "," + randomNumber(0, 255) + ")";
}
//獲取當前的scrollTop
var scrollTopDistance;
//獲取所有的ul
var uls = document.getElementsByTagName("ul");
var i = 0;
var k = i;
function waterFall(){
for (i = k;i < k + 4;i++) {
//創建li
var li = document.createElement("li");
//隨機顏色
li.style.backgroundColor = randomColor();
//隨機高度
li.style.height = randomNumber(150, 500) + "px";
//手動轉換為字符串
li.innerHTML = i + 1 + "";
//插入到對應的ul中
//判斷哪個ul的高度低，該次創建的li就插入到此ul中
var index = 0; //記錄下標
for (var j = 0; j < uls.length; j++) {
if (uls[j].offsetHeight < uls[index].offsetHeight) {
index = j;
}
}
//將元素節點插入文檔中
uls[index].appendChild(li);
}
k = i;
return uls[index].offsetHeight;
}
waterFall();
var height;
//無限加載瀑布流方法，核心思想就是
document.onmousewheel = function(){
//文檔的高度 - 文檔的可視高度 < 鼠標的滑動距離 時開始加載圖片
height = document.body.clientHeight - document.documentElement.clientHeight;
if(height <= document.body.scrollTop){
waterFall();
}
}
</script>
</html>以上是“怎么基于JavaScript實現無限加載瀑布流”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
