关于多栏布局的一个问题

来源：9-2 竖向瀑布流布局-2

人生的起源

2022-02-13

多栏布局怎么设置每一项的高度随机？

老师提供的图片高度是参差不齐的，如果我的图片高度都一样，做出来的效果也不好看

写回答

1回答

西门老舅

2022-02-14

已采纳

你好，

高度随机需要配合JS。

示例如下：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.main{

column-width: 300px;

column-gap: 20px;

column-rule: 1px gray dashed;

}

h1{

column-span: all;

text-align: center;

}

.main .item{

border: 1px black solid;

break-inside: avoid;

}

</style>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

let items = document.querySelectorAll('.item');

for(let i=0;i<items.length;i++){

items[i].style.height = Math.random() * 100 + 100 + 'px';

}

</script>

</body>

</html>

人生的起源

非常感谢！

2022-02-14

共1条回复

前端内功修炼 5大主流布局系统进阶

前端内功修炼：5大主流布局系统进阶

758 学习 · 231 问题

查看课程

相似问题

做PC网站是用什么布局好

回答 1

想到一个栅格布局相关的问题

回答 1

请问这个课程包括数据交互的部分吗？

回答 1

老师，请问可视化大屏的布局用rem还是vw更好呢

回答 1

网格布局的兼容性问题

回答 1

打开慕课网App查看更多内容