Creating is the most intense excitement one can come to know.
—Anni Albers, On Designing
今天看到一篇博客,反正就是要实现下面的类似效果,反正我之前不知道怎么做。
其实也不是完全不知道怎么做,就是一个个的div里面放上一个汉字就可以了吧,但是每个div的大小太难配置了,可以说很难解决。不知道这种布局的官方名称是什么,先叫做瓦片布局吧。
博客中是这么做的,就是grid布局。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
font-family: 黑体;
box-sizing: border-box;
}
section {
background-color: #09BB07;
display: grid;
width: 60vw;
height: 30vw;
overflow: hidden;
grid-template-columns: repeat(60, 1vw);
grid-template-rows: repeat(30, 1vw);
grid-auto-flow: column;
grid-auto-flow: row;
/*grid-auto-flow: dense;*/
}
div {
display: flex;
justify-content: center;
align-items: center;
--n: 3;
grid-column-end: span var(--n);
grid-row-end: span var(--n);
font-size: calc(var(--n) * 1vw);
border: 1px solid red;
}
</style>
</head>
<body>
<section>
</section>
</body>
<script>
let fragment=document.createDocumentFragment();
for(let i=0;i<30;i++){
fragment.append(document.createElement('div'));
}
document.querySelector('section').append(fragment);
[...document.querySelectorAll('div')].forEach((div, index) => {
div.style.setProperty('--n', Math.ceil(Math.random() * 10));
div.innerHTML = String.fromCodePoint(Math.round(Math.random() * 20901) + 19968);
// div.innerHTML = index;
});
</script>
</html>
下图是上面代码跑起来的结果,我不断刷新的截屏gif