Vue实现简单的瀑布流

最新推荐文章于 2024-10-06 11:26:26 发布

vueer

最新推荐文章于 2024-10-06 11:26:26 发布

阅读量201

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/wangming0123/article/details/115729752

版权

web 专栏收录该内容

29 篇文章 1 订阅

订阅专栏

<template>
  <div class="masonry">
    <div class="item" v-for="index in 10" :key="index">
      <img
        :src="
          'http://picsum.photos/360/' +
          Math.ceil(Math.random() * 100) +
          '?random=' +
          index
        "
      />
    </div>
  </div>
</template>
<style scoped>
.masonry {
  /* 指定div为4列 */
  column-count: 4;
  /* 确定列间间距 */
  column-gap: 0;
}
.item {
  padding: 2px;
}
img {
  display: block;
  width: 100%;
}
</style>