基于js css的瀑布流demo

news/2024/4/27 23:27:36/文章来源:https://blog.csdn.net/qq_53895518/article/details/136906765

要实现照片按照瀑布流展示，写个小demo，记录下。

瀑布流实现思路如下：

CSS 弹性布局对 3 列按横向排列，对每一列内部按纵向排列

html代码：

<div class="content"></div>

css代码：

.content {width: 100%;height: 100%;display: flex;justify-content: center;align-items: flex-start;
}

js代码：

    const list = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];const content = document.querySelector('.content');for (let i = 0; i < 3; i++) {const div = document.createElement('div');div.style.width = '210px';div.style.height = '100%';list.forEach(function (ele, index) {if (index % 3 == i) {const son = document.createElement('div')son.style.backgroundColor = randomColor();// 给盒子设置随机高度son.style.height = (Math.floor(Math.random() * (301 - 200)) + 200) + 'px';son.style.marginBottom = '10px';son.innerText = ele;div.appendChild(son);};});content.appendChild(div);};function randomColor() {var color = '#';for (var i = 0; i < 6; i++) {// 设置随机颜色color += Math.floor(Math.random() * 16).toString(16); // 生成0-F之间的随机十六进制字符};return color;};

运行之后效果图如👇所示：

整体代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.content {width: 100%;height: 100%;display: flex;justify-content: center;align-items: flex-start;}</style>
</head><body><div class="content"></div><script>const list = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];const content = document.querySelector('.content');for (let i = 0; i < 3; i++) {const div = document.createElement('div');div.style.width = '210px';div.style.height = '100%';list.forEach(function (ele, index) {if (index % 3 == i) {const son = document.createElement('div')son.style.backgroundColor = randomColor();// 给盒子设置随机高度son.style.height = (Math.floor(Math.random() * (301 - 200)) + 200) + 'px';son.style.marginBottom = '10px';son.innerText = ele;div.appendChild(son);};});content.appendChild(div);};function randomColor() {var color = '#';for (var i = 0; i < 6; i++) {// 设置随机颜色color += Math.floor(Math.random() * 16).toString(16); // 生成0-F之间的随机十六进制字符};return color;};</script>
</body>
</html>