<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<title>Document</title>
<style>
.container {
display: flex;
flex-flow: column wrap;
align-content: space-between;
/* 容器必须有固定高度
* 且高度大于最高的列高 */
height: 660px;
/* 非必须 */
background-color: #f7f7f7;
border-radius: 3px;
padding: 20px;
width: 60%;
margin: 40px auto;
counter-reset: items;
}
.item {
width: 32%;
/* 非必须 */
position: relative;
margin-bottom: 2%;
border-radius: 3px;
background-color: #a1cbfa;
border: 1px solid #4290e2;
box-shadow: 0 2px 2px rgba(0,90,250,0.05),
0 4px 4px rgba(0,90,250,0.05),
0 8px 8px rgba(0,90,250,0.05),
0 16px 16px rgba(0,90,250,0.05);
color: #fff;
padding: 15px;
box-sizing: border-box;
}
/* 仅用于打印数字 */
.item::before {
counter-increment: items;
content: counter(items);
}
/* 将内容块重排为3列 */
.item:nth-child(3n+1) { order: 1; }
.item:nth-child(3n+2) { order: 2; }
.item:nth-child(3n) { order: 3; }
/* 强制换列 */
.container::before,
.container::after {
content: "";
flex-basis: 100%;
width: 0;
order: 2;
}
body { font-family: sans-serif; }
h3 { text-align: center; }
</style>
</head>
<body>
<div id="app">
<div class="container">
<div class="item" style="height: 140px"></div>
<div class="item" style="height: 190px"></div>
<div class="item" style="height: 170px"></div>
<div class="item" style="height: 120px"></div>
<div class="item" style="height: 160px"></div>
<div class="item" style="height: 180px"></div>
<div class="item" style="height: 140px"></div>
<div class="item" style="height: 150px"></div>
<div class="item" style="height: 170px"></div>
<div class="item" style="height: 170px"></div>
</div>
</div>
<script>
const {createApp} = Vue
createApp({
data(){
return {
list:[
{
id: 0,
content: '出或属及然立物区际团干林品号界织声政自青',
img: 'https://picsum.photos/200/335?random=58'
},
{
id: 1,
content: '规社需别至打她南气提现身记指今化油百积体',
img: 'https://picsum.photos/200/349?random=761'
},
{
id: 2,
content: '许题状世声程管么物社社同圆了而备公所料青',
img: 'https://picsum.photos/200/442?random=71'
},
{
id: 3,
content: '然立物区际团干林品号界织声政自青参从运统',
img: 'https://picsum.photos/200/322?random=312'
},
{
id: 4,
content: '团干林品号界织声政自青参从运统类半口识高',
img: 'https://picsum.photos/200/399?random=460'
},
{
id: 5,
content: '例导向王活中叫社就江工外以气图专律北多建',
img: 'https://picsum.photos/200/446?random=898'
},
{
id: 6,
content: '六思断名过增思复许石查再生斯法派带改叫向',
img: 'https://picsum.photos/200/495?random=460'
},
{
id: 7,
content: '可定开京出或属及然立物区际团干林品号界织',
img: 'https://picsum.photos/200/451?random=389'
},
{
id: 8,
content: '定开京出或属及然立物区际团干林品号界织声',
img: 'https://picsum.photos/200/374?random=216'
},
{
id: 9,
content: '提现身记指今化油百积体量但国参根书为影从',
img: 'https://picsum.photos/200/339?random=426'
},
{
id: 10,
content: '问任写主速情及极需和始亲点酸七建红放周养',
img: 'https://picsum.photos/200/400?random=22'
},
{
id: 11,
content: '参从运统类半口识高多选石空改流通工来万北',
img: 'https://picsum.photos/200/468?random=373'
},
{
id: 12,
content: '习七准导离每见里可求产着影却响百产际片院',
img: 'https://picsu m.photos/200/442?random=903'
},
{
id: 13,
content: '划子要步百图引美须成展党复任场走许就素受',
img: 'https://picsum.photos/200/416?random=874'
},
{
id: 14,
content: '上是题快而被己老制米制往例导向王活中叫社',
img: 'https://picsum.photos/200/421?random=219'
},
{
id: 15,
content: '开京出或属及然立物区际团干林品号界织声政',
img: 'https://picsum.photos/200/427?random=909'
}
]
}
}
}).mount('#app')
</script>
</body>
</html>
css实现瀑布流
最新推荐文章于 2024-07-10 13:54:40 发布