要实现照片按照瀑布流展示,写个小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>
推荐文章👇
5 种瀑布流场景的实现原理解析 - 知乎
实现瀑布流布局的四种方法-CSDN博客