破布流布局
CSS写法
js
<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写法