要实现照片按照瀑布流展示,写个小demo,记录下。
瀑布流实现思路如下:
- CSS 弹性布局对 3 列按横向排列,对每一列内部按纵向排列
html代码:
html
<div class="content"></div>
css代码:
css
.content {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: flex-start;
}
js代码:
javascript
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;
};
运行之后效果图如👇所示 :
整体代码:
html
<!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>
推荐文章👇