html页面代码（一个构想，没有写完随机大小）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<!-- 给item的div动态生成宽高，例如生成最高120px的圆形，最少65px的圆 -->
<!-- 使用：style=“方法（）” 方法（）返回一个对象{width:80,height:80} 宽高使用随机数生成 -->
<!-- Math.floor(Math.random() * (80 - 150) ) + 150 -->
<!-- Math.floor(Math.random() * (max - min) ) + min -->
<body>
<body>
<div style="overflow-y: auto;
height: 245px;
width: 420px;">
<div class="container">
<div class="item" style="width: 80px;height: 80px;">
</div>
<div class="item" style="width: 65px;height: 65px;">
</div>
<div class="item" style="width: 80px;height: 80px;">
</div>
<div class="item" style="width: 50px;height: 50px;">
</div>
<div class="item" style="width: 60px;height: 60px;">
</div>
<div class="item" style="width: 75px;height: 75px;">
</div>
<div class="item" style="width: 90px;height: 90px;">
</div>
<div class="item" style="width: 50px;height: 50px;">
</div>
<div class="item" style="width: 60px;height: 60px;">
</div>
<div class="item" style="width: 75px;height: 75px;">
</div>
<div class="item" style="width: 90px;height: 90px;">
</div>
<div class="item" style="width: 50px;height: 50px;">
</div>
<div class="item" style="width: 60px;height: 60px;">
</div>
<div class="item" style="width: 75px;height: 75px;">
</div>
<div class="item" style="width: 90px;height: 90px;">
</div>
</div>
</div>
</body>
<style>
.container {
column-count: 3;
/* 列数 */
column-gap: 20px;
/* 列间距 */
}
.item {
margin-bottom: 10px;
/* 防止多列布局，分页媒体和多区域上下文中的意外中断 */
break-inside: avoid;
}
.item {
background-color: red;
border-radius: 50%;
display: inline-block;
}
.item:hover {
transform: scale(1.1);
/*scale为变大变小的倍数*/
transition: 500ms;
/*设置的是动画持续过程，大一点会显得不那么突兀*/
}
</style>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
