破布流布局

CSS写法

<template>
  <div>
    <div id="waterfall">  
    <div class="item" style="height: 150px;">Item 1</div>  
    <div class="item" style="height: 200px;">Item 2</div>  
    <div class="item" style="height: 300px;">Item 3</div>  
    <div class="item" style="height: 150px;">Item 1</div>  
    <div class="item" style="height: 200px;">Item 2</div>  
    <div class="item" style="height: 300px;">Item 3</div>  
    <div class="item" style="height: 150px;">Item 1</div>  
    <div class="item" style="height: 200px;">Item 2</div>  
    <div class="item" style="height: 300px;">Item 3</div>  
    <div class="item" style="height: 150px;">Item 1</div>  
    <div class="item" style="height: 200px;">Item 2</div>  
    <div class="item" style="height: 300px;">Item 3</div>  
    <!-- 更多 item -->  
</div>
  </div>
</template>
<script>
    
</script>
<style scoped>
#waterfall {  
    column-count: 3; /* 定义列数 */  
    column-gap: 10px; /* 列与列之间的间隙 */  
}  
.item {  
    break-inside: avoid; /* 防止内容被分割到多列 */  
    margin-bottom: 10px; /* 元素底部间隔 */  
    background-color: #f9f9f9; /* 背景色 */  
    border: 1px solid #ddd; /* 边框 */  
    padding: 10px; /* 内边距 */  
    box-sizing: border-box; /* 盒模型 */  
}
</style>

<template>
  <div>
    <div id="waterfall">  
    <div class="item" style="height: 150px;">Item 1</div>  
    <div class="item" style="height: 200px;">Item 2</div>  
    <div class="item" style="height: 300px;">Item 3</div>  
    <div class="item" style="height: 150px;">Item 1</div>  
    <div class="item" style="height: 200px;">Item 2</div>  
    <div class="item" style="height: 300px;">Item 3</div>  
    <div class="item" style="height: 150px;">Item 1</div>  
    <div class="item" style="height: 200px;">Item 2</div>  
    <div class="item" style="height: 300px;">Item 3</div>  
    <div class="item" style="height: 150px;">Item 1</div>  
    <div class="item" style="height: 200px;">Item 2</div>  
    <div class="item" style="height: 300px;">Item 3</div>  
    <!-- 更多 item -->  
</div>
  </div>
</template>
<script>
    
</script>
<style scoped>
#waterfall {  
    column-count: 3; /* 定义列数 */  
    column-gap: 10px; /* 列与列之间的间隙 */  
}  
.item {  
    break-inside: avoid; /* 防止内容被分割到多列 */  
    margin-bottom: 10px; /* 元素底部间隔 */  
    background-color: #f9f9f9; /* 背景色 */  
    border: 1px solid #ddd; /* 边框 */  
    padding: 10px; /* 内边距 */  
    box-sizing: border-box; /* 盒模型 */  
}
</style>

js写法