[Web] 简单瀑布流布局实现
Posted SlimeNull
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[Web] 简单瀑布流布局实现相关的知识，希望对你有一定的参考价值。
目前的纯 CSS 布局, 是没办法实现比较完美的瀑布流布局的.
我使用 JS + CSS, 并且自动布局实现了较为简单, 观赏性好的瀑布流布局.
代码
html:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<button onclick="add_new()">add</button>
<button onclick="start_loop()">start loop</button>
<button onclick="stop_loop()">stop loop</button>
<!--瀑布流容器-->
<div id="masonry">
<!--瀑布流列-->
<div class="masonry-column-container">
<div class="masonry-column"></div>
</div>
<div class="masonry-column-container">
<div class="masonry-column"></div>
</div>
<div class="masonry-column-container">
<div class="masonry-column"></div>
</div>
<div class="masonry-column-container">
<div class="masonry-column"></div>
</div>
<div class="masonry-column-container">
<div class="masonry-column"></div>
</div>
<div class="masonry-column-container">
<div class="masonry-column"></div>
</div>
<div class="masonry-column-container">
<div class="masonry-column"></div>
</div>
</div>
<script>
// 包装一个简单的随机数
function random(start, end)
return Math.random() * (end - start) + start;
// 在瀑布流中添加一个元素
function add_new()
let masonry = document.getElementById("masonry");
let columns = masonry.querySelectorAll(".masonry-column");
let minHeightColumn = columns[0];
// 拿到高度最低的列
columns.forEach(ele =>
if (ele.scrollHeight < minHeightColumn.scrollHeight)
minHeightColumn = ele;
);
// 创建一个新元素 (设置高度, 背景颜色)
let new_item = document.createElement('div');
new_item.classList.add('item');
new_item.style.height = `$Math.random() * 200 + 70px`;
new_item.style.backgroundColor = `rgb($random(0, 255),$random(0, 255),$random(0, 255))`
// 在高度最低的列中添加元素
minHeightColumn.appendChild(new_item);
var masonry_loop;
function start_loop()
masonry_loop = setInterval(add_new, 50);
function stop_loop()
clearInterval(masonry_loop);
</script>
</body>
</html>
CSS:
/* 瀑布流容器 */
#masonry
margin: 0 auto;
width: 80vw; /* 居中 */
display: grid; /* 网格布局 */
grid-template-columns: repeat(7, 1fr); /* 总共 7 列 */
gap: 10px; /* 间距 10px */
/* 指定列是相对位置 (其中的元素可以相对列来定位) */
#masonry .masonry-column
position: relative;
/* 限制内容的宽度占满列, 加上边距, 圆角 */
#masonry .item
width: 100%;
margin-top: 10px;
border-radius: 1em;
在 CodePen 上查看: Simple Masonry
以上是关于[Web] 简单瀑布流布局实现的主要内容，如果未能解决你的问题，请参考以下文章