瀑布流布局

最新推荐文章于 2022-02-25 19:35:31 发布

Web-Life

最新推荐文章于 2022-02-25 19:35:31 发布

阅读量253

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/SuperListenter/article/details/53013878

本文介绍了一种使用HTML、CSS和JavaScript实现动态加载瀑布流布局的方法。通过计算每列的高度来确保新元素能够均匀分布，同时利用JavaScript监听窗口滚动事件以实现无限加载效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>

<html>

<head>

* {

margin: 0;

padding: 0;

}

#box {

width: 100%;

position: relative;

}

#list {

width: 100%;

list-style: none;

font-size: 30px;

text-align: center;

position: relative;

}

#list li {

width: 200px;

border: 1px solid red;

margin: 5px;

background: cornflowerblue;

position: absolute;

top: 0;

left: 0;

}

</style>

</head>

<body>

</body>

</html>

var box = document.getElementById("box");

var list = document.getElementById("list");

var existLi = [];

//随机数

function Random(min, max) {

return Math.random() * (max - min + 1) + min;

}

//创建 Li 标签函数

function creatLi(bol) {

//每列的宽度

var WIDTH = 210;

//列数

var COLS = parseInt(document.body.clientWidth / WIDTH);

var LiHeight = []; //采用数组记录每列高度的数组

//找最小高度列

function minHeight() {

var min = LiHeight[0];

var minIndex = 0;

for(var i = 0; i < COLS; i++) {

if(min > LiHeight[i]) {

min = LiHeight[i];

minIndex = i;

}

return minIndex;

}

for(var i = 0; i < COLS; i++) {

LiHeight[i] = 0;

}

//创建 50个li 标签

for(var i = 0; i < 50; i++) {

//创建 li 标签

var Li = existLi[i] || document.createElement("li");

if(bol == true) {

var H = Random(50, 400); //获取li 标签的随机高度

var a = parseInt(Random(0, 255));

var b = parseInt(Random(0, 255));

var c = parseInt(Random(0, 255));

Li.style.background = 'rgb(' + a + ',' + b + ',' + c + ')';

Li.style.height = H + "px";

}

Li.innerHTML = i + 1;

var minLiHeight = minHeight(); //最小列的高度下标

Li.style.top = LiHeight[minLiHeight] + "px";

Li.style.left = WIDTH * minLiHeight + "px";

if(bol == true) {

list.appendChild(Li);

existLi.push(Li); //创建 Li 标签的数组

LiHeight[minLiHeight] += (H + 10); //存放最小列的高度；

} else {

LiHeight[minLiHeight] += (Li.offsetHeight + 10);

}

creatLi(true);

window.onresize = function() {

creatLi(false);

}

window.onscroll = function() {

//计算滚动条是否滑动了底部

//1.拿出滚动的距离

var hasScrolled = document.documentElement.scrollTop + document.body.scrollTop;

//2.计算滑动的最大范围

var maxHeight = document.documentElement.offsetHeight - document.documentElement.clientHeight; //谷歌不支持

//滑动的最大的范围=（内容高度+border高度+padding高度）-（内容高度+padding高度）

var maxHeight = document.body.offsetHeight - document.body.clientHeight; //应用谷歌浏览器

if(hasScrolled >= maxHeight) {

creatLi(true);

}

</script>