【无标题】
作者：互联网
```<template> <div> <ul class="flowBox clearfix"> <!-- 定义列数 --> <li v-for="(item, index) of list" :key="index"> <a v-for="data of item" :key="data.id"> <div><img :src="data.pic" alt="" /></div> <span>{{ data.title }}</span> <span>{{ data.id }}</span> </a> </li> </ul> </div></template><script>export default { data() { return { list: [[], []], height: new Array(2).fill(0), // 模拟后台返会的数据 dataList: [ { id: 1, pic: "https://hbimg.huabanimg.com/a402f655432def0c8b03a4057780e7aec2d22eee1b6e7-KjNCiv_fw658/format/webp", title: "泰勒·斯威夫特（Taylor Swift），1989年12月13日出生于美国宾州，美国歌手、演员。2006年出道，同年发行专辑《泰勒·斯威夫特》，该专辑获得美国唱片业协会的白金唱片认证", link: "https://baike.sogou.com/v1850208.htm?fromTitle=%E9%9C%89%E9%9C%89", }, { id: 2, pic: "https://hbimg.huabanimg.com/a402f655432def0c8b03a4057780e7aec2d22eee1b6e7-KjNCiv_fw658/format/webp", title: "泰勒·斯威夫特（Taylor Swift），1989年12月13日出生于美国宾州，美国歌手、演员。2006年出道，同年发行专辑《泰勒·斯威夫特》，该专辑获得美国唱片业协会的白金唱片认证", link: "https://baike.sogou.com/v1850208.htm?fromTitle=%E9%9C%89%E9%9C%89", }, { id: 3, pic: "https://hbimg.huabanimg.com/a402f655432def0c8b03a4057780e7aec2d22eee1b6e7-KjNCiv_fw658/format/webp", title: "泰勒·斯威夫特（Taylor Swift），1989年12月13日出生于美国宾州，美国歌手、演员。2006年出道，同年发行专辑《泰勒·斯威夫特》，该专辑获得美国唱片业协会的白金唱片认证", link: "https://baike.sogou.com/v1850208.htm?fromTitle=%E9%9C%89%E9%9C%89", }, { id: 4, pic: "https://hbimg.huabanimg.com/868e6f829053064a47c6ec8a0f7af4d778a513831f803-iS9Ynx_fw658/format/webp", title: "泰勒·斯威夫特（Taylor Swift），1989年12月13日出生于美国宾州，美国歌手、演员。2006年出道，同年发行专辑《泰勒·斯威夫特》，该专辑获得美国唱片业协会的白金唱片认证", link: "https://baike.sogou.com/v1850208.htm?fromTitle=%E9%9C%89%E9%9C%89", }, { id: 5, pic: "https://hbimg.huabanimg.com/868e6f829053064a47c6ec8a0f7af4d778a513831f803-iS9Ynx_fw658/format/webp", title: "泰勒·斯威夫特（Taylor Swift），1989年12月13日出生于美国宾州，美国歌手、演员。2006年出道，同年发行专辑《泰勒·斯威夫特》，该专辑获得美国唱片业协会的白金唱片认证", link: "https://baike.sogou.com/v1850208.htm?fromTitle=%E9%9C%89%E9%9C%89", }, { id: 6, pic: "img/7.jpg", title: "泰勒·斯威夫特（Taylor Swift），1989年12月13日出生于美国宾州，美国歌手、演员。2006年出道，同年发行专辑《泰勒·斯威夫特》，该专辑获得美国唱片业协会的白金唱片认证", link: "https://baike.sogou.com/v1850208.htm?fromTitle=%E9%9C%89%E9%9C%89", }, { id: 7, pic: "img/2.jpg", title: "泰勒·斯威夫特（Taylor Swift），1989年12月13日出生于美国宾州，美国歌手、演员。2006年出道，同年发行专辑《泰勒·斯威夫特》，该专辑获得美国唱片业协会的白金唱片认证", link: "https://baike.sogou.com/v1850208.htm?fromTitle=%E9%9C%89%E9%9C%89", }, { id: 8, pic: "img/7.jpg", title: "泰勒·斯威夫特（Taylor Swift），1989年12月13日出生于美国宾州，美国歌手、演员。2006年出道，同年发行专辑《泰勒·斯威夫特》，该专辑获得美国唱片业协会的白金唱片认证", link: "https://baike.sogou.com/v1850208.htm?fromTitle=%E9%9C%89%E9%9C%89", }, { id: 9, pic: "img/8.jpg", title: "泰勒·斯威夫特（Taylor Swift），1989年12月13日出生于美国宾州，美国歌手、演员。2006年出道，同年发行专辑《泰勒·斯威夫特》，该专辑获得美国唱片业协会的白金唱片认证", link: "https://baike.sogou.com/v1850208.htm?fromTitle=%E9%9C%89%E9%9C%89", }, { id: 10, pic: "img/1.jpg", title: "泰勒·斯威夫特（Taylor Swift），1989年12月13日出生于美国宾州，美国歌手、演员。2006年出道，同年发行专辑《泰勒·斯威夫特》，该专辑获得美国唱片业协会的白金唱片认证", link: "https://baike.sogou.com/v1850208.htm?fromTitle=%E9%9C%89%E9%9C%89", }, { id: 11, pic: "img/3.jpg", title: "泰勒·斯威夫特（Taylor Swift），1989年12月13日出生于美国宾州，美国歌手、演员。2006年出道，同年发行专辑《泰勒·斯威夫特》，该专辑获得美国唱片业协会的白金唱片认证", link: "https://baike.sogou.com/v1850208.htm?fromTitle=%E9%9C%89%E9%9C%89", }, { id: 12, pic: "img/11.jpg", title: "泰勒·斯威夫特（Taylor Swift），1989年12月13日出生于美国宾州，美国歌手、演员。2006年出道，同年发行专辑《泰勒·斯威夫特》，该专辑获得美国唱片业协会的白金唱片认证", link: "https://baike.sogou.com/v1850208.htm?fromTitle=%E9%9C%89%E9%9C%89", }, { id: 13, pic: "img/6.jpg", title: "泰勒·斯威夫特（Taylor Swift），1989年12月13日出生于美国宾州，美国歌手、演员。2006年出道，同年发行专辑《泰勒·斯威夫特》，该专辑获得美国唱片业协会的白金唱片认证", link: "https://baike.sogou.com/v1850208.htm?fromTitle=%E9%9C%89%E9%9C%89", }, { id: 14, pic: "img/3.jpg", title: "泰勒·斯威夫特（Taylor Swift），1989年12月13日出生于美国宾州，美国歌手、演员。2006年出道，同年发行专辑《泰勒·斯威夫特》，该专辑获得美国唱片业协会的白金唱片认证", link: "https://baike.sogou.com/v1850208.htm?fromTitle=%E9%9C%89%E9%9C%89", }, { id: 15, pic: "", title: "泰勒·斯威夫特（Taylor Swift），1989年12月13日出生于美国宾州，美国歌手、演员。2006年出道，同年发行专辑《泰勒·斯威夫特》，该专辑获得美国唱片业协会的白金唱片认证", link: "https://baike.sogou.com/v1850208.htm?fromTitle=%E9%9C%89%E9%9C%89", }, { id: 16, pic: "", title: "泰勒·斯威夫特（Taylor Swift），1989年12月13日出生于美国宾州，美国歌手、演员。2006年出道，同年发行专辑《泰勒·斯威夫特》，该专辑获得美国唱片业协会的白金唱片认证", link: "https://baike.sogou.com/v1850208.htm?fromTitle=%E9%9C%89%E9%9C%89", }, { id: 17, pic: "", title: "泰勒·斯威夫特（Taylor Swift），1989年12月13日出生于美国宾州，美国歌手、演员。2006年出道，同年发行专辑《泰勒·斯威夫特》，该专辑获得美国唱片业协会的白金唱片认证", link: "https://baike.sogou.com/v1850208.htm?fromTitle=%E9%9C%89%E9%9C%89", }, { id: 18, pic: "", title: "泰勒·斯威夫特（Taylor Swift），1989年12月13日出生于美国宾州，美国歌手、演员。2006年出道，同年发行专辑《泰勒·斯威夫特》，该专辑获得美国唱片业协会的白金唱片认证", link: "https://baike.sogou.com/v1850208.htm?fromTitle=%E9%9C%89%E9%9C%89", }, { id: 19, pic: "https://hbimg.huabanimg.com/868e6f829053064a47c6ec8a0f7af4d778a513831f803-iS9Ynx_fw658/format/webp", title: "泰勒·斯威夫特（Taylor Swift），1989年12月13日出生于美国宾州，美国歌手、演员。2006年出道，同年发行专辑《泰勒·斯威夫特》，该专辑获得美国唱片业协会的白金唱片认证", link: "https://baike.sogou.com/v1850208.htm?fromTitle=%E9%9C%89%E9%9C%89", }, { id: 20, pic: "", title: "泰勒·斯威夫特（Taylor Swift），1989年12月13日出生于美国宾州，美国歌手、演员。2006年出道，同年发行专辑《泰勒·斯威夫特》，该专辑获得美国唱片业协会的白金唱片认证", link: "https://baike.sogou.com/v1850208.htm?fromTitle=%E9%9C%89%E9%9C%89", }, ], }; }, methods: { async renderList() { // 对数据循环添加到列中 // let nodes = [].slice.call(document.querySelectorAll(".flowBox > li")); for (let i = 0; i < this.dataList.length; i++) { // 找到最小高度添加 let minHeight = Math.min(...this.height); let minIndex = this.height.indexOf(minHeight); console.log("最小高度:" + minHeight, "下标:" + minIndex, this.height); this.list[minIndex].push(this.dataList[i]); let imgHeight = 200; if (this.dataList[i].pic) { imgHeight = await this.loadImg(this.dataList[i].pic); } // let imgHeight = await this.loadImg(this.dataList[i].pic); // 强制更新 this.$set(this.height, minIndex, this.height[minIndex] + imgHeight); } }, loadImg(url) { return new Promise((resolve,reject) => { let img = new Image(); img.addEventListener("load", () => { resolve(img.height); }); img.addEventListener("error", () => { resolve(200) reject(200); }); img.src = url; }); }, }, mounted() { this.renderList(); },};</script><style lang="scss">li { list-style: none;}html,body { background: #f4f4f4; overflow-x: hidden;}.flowBox { margin: 20px auto; width: 660px;}.flowBox li { float: left; margin-right: 20px; width: 320px;}.flowBox li:nth-last-child(1) { margin-right: 0;}.flowBox li a { display: block; margin-bottom: 10px; padding: 10px; background: #fff; box-shadow: 3px 3px 10px 0 #666;}.flowBox li a div img { display: block; width: 100%;}.flowBox li a span { display: block; margin-top: 10px; font-size: 12px; color: #555; line-height: 20px;}</style>
标签：泰勒,E9%,专辑,无标题,斯威夫特,com,9C% 来源： https://blog.csdn.net/luckyboy14/article/details/121739561