```<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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。