【可预览】前端开发技能_瀑布流极简版

web前端开发技术—html|前端开发兼容华为手机类型|搭建web前端开发平台

html 代码

<!DOCTYPE html>

<html>

<head>

<title>前端开发插件：瀑布流</title>

* {

margin: 0;

padding: 0;

}

#u {

list-style: none;

margin: 0 auto;

position: relative;

top: 0;

left: 0;

}

#u>li {

position: absolute;

font-size: 50px;

background-color: black;

width: 200px;

border: 1px solid white;

color: white;

}

</style>

</head>

<body>

</ul>

function randH(min, max) {

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

};

var oU = document.getElementById(“u”);

// 根据自己的documentElement.clientWidth 计算出你有多少列

var cols = parseInt(document.documentElement.clientWidth / 200);

// 初始化列高数组

var arrH = [];

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

arrH[i] = 0;

}

// 用for循环生成20个小块

for (var n = 0; n < 20; n++) {

var li = document.createElement(“li”);

li.innerHTML = n;

li.style.height = randH(100, 300) + “px”;

// 求最短列冒泡比法

var minH = arrH[0];

var index1 = 0;

for (var j = 0; j < arrH.length; j++) {

if (minH > arrH[j]) {

minH = arrH[j];

index1 = j;

}

// 定位li

// 定位li 的left

li.style.left = index1 * 200 + “px”;

li.style.top = arrH[index1] + “px”;

oU.appendChild(li);

// 更新最短列高度数组

arrH[index1] += li.offsetHeight;

};

</script>

</body>

</html>

前端开发搭建本地服务器热更新|前端开发工程搭建|搭建前端自动化开发

【可预览】前端开发技能_瀑布流极简版

前端开发者

相关推荐

评论抢沙发

评论前必须登录！

最新评论

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

最新评论

评论抢沙发