html函数如何制作瀑布流布局 html函数多列布局的自动排列

<div class="masonry">
  <div class="item">内容1</div>
  <div class="item">内容2</div>
  <div class="item">内容3</div>
  <!-- 更多项目 -->
</div>

.masonry {
  column-count: 3;
  column-gap: 1rem;
}
<p>.item {
break-inside: avoid;
margin-bottom: 1rem;
background: #f0f0f0;
padding: 1rem;
}</p>

<div class="flex-masonry">
  <div class="flex-item">卡片1</div>
  <div class="flex-item">卡片2</div>
  <div class="flex-item">卡片3</div>
  <!-- 更多项 -->
</div>

.flex-masonry {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
<p>.flex-item {
flex: 0 0 calc(33.333% - 16px);
background: #e0e0e0;
padding: 16px;
}</p>

<div id="masonry-container"></div>
<p><script>
function initMasonry(items, container, columnCount) {
const columns = [];
for (let i = 0; i < columnCount; i++) {
columns.push(document.createElement('div'));
columns[i].style.cssText = 'width: calc(100% / ' + columnCount + '); float: left;';
container.appendChild(columns[i]);
}</p><p>items.forEach(item => {
// 找出最短列
const shortestCol = columns.reduce((a, b) =>
a.offsetHeight <= b.offsetHeight ? a : b
);
const itemEl = document.createElement('div');
itemEl.className = 'masonry-item';
itemEl.textContent = item;
itemEl.style.marginBottom = '16px';
shortestCol.appendChild(itemEl);
});
}</p><p>// 调用示例
const data = ['项目1', '项目2', '项目较长文本...', '项目4', '短'];
const container = document.getElementById('masonry-container');
initMasonry(data, container, 3);
</script></p>

.grid-masonry {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
  gap: 16px;
}