本帖最后由 w460270218 于 2022-7-17 23:34 编辑
直接上代码
[HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
</head>
<body>
<div id="app">
<div class="masonry">
<div class="item" v-for="(item,index) in info" :key="index">
<img :src="item">
</div>
</div>
</div>
<script type = "text/javascript">
new Vue({
el: '#app',
data () {
return {
info: []
}
},
methods:{
add(){
this.info=[]
for (let i = 0; i < 200; i++) {
axios
.get('https://api.uomg.com/api/rand.img3?format=json')
.then(response => {
this.info.push(response.data.imgurl)
})
.catch(function (error) { // 请求失败处理
console.log(error);
});
}
}
},
mounted () {
this.add()
}
})
</script>
<style>
body {
margin: 4px;
font-family: Helvetica;
/* Centering & Limit Width */
margin: auto;
width: 720px;
}
.masonry {
column-count: 4;
column-gap: 0;
}
.item {
padding: 2px;
position: relative;
counter-increment: item-counter;
}
.item img {
display: block;
width: 100%;
height: auto;
}
.item::after {
position: absolute;
display: block;
top: 2px;
left: 2px;
width: 24px;
height: 24px;
text-align: center;
line-height: 24px;
background-color: #000;
color: #fff;
content: counter(item-counter);
}
</style>
</body>
</html>
示例展示：
| 
[复制链接]
发表于 2022-7-17 23:29
