vue实现瀑布流

最新推荐文章于 2024-06-28 14:13:55 发布

天使的同类

最新推荐文章于 2024-06-28 14:13:55 发布

阅读量3.5k

点赞数 22

分类专栏：瀑布流 vue.js html 文章标签： vue.js 前端

本文链接：https://blog.csdn.net/summer_jk/article/details/135959302

版权

每个色块宽度一致，高度自适应

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="renderer" content="webkit">
  <meta name="viewport" content="user-scalable=0">
  <title>Vertical Line</title>
  <link rel="stylesheet" href="./common/css/style.css">
  <style>
    .item-move {
     
      transition: all .5s cubic-bezier(.55, 0, .1, 1);
      -webkit-transition: all .5s cubic-bezier(.55, 0, .1, 1);
    }
  </style>
</head>

<body>
  <div id="app">
    <waterfall :align="align" :line-gap="200" :min-line-gap="100" :max-line-gap="220" :single-max-width="300"
      :watch="items" @reflowed="reflowed" ref="waterfall">
      <!-- each component is wrapped by a waterfall slot -->
      <waterfall-slot v-for="(item, index) in items" :width="item.width" :height="item.height" :order="index"
        :key="item.index" move-class="item-move">
        <div class="item" :style="item.style" :index="item.index"></div>
      </waterfall-slot>
    </waterfall>
  </div>
  <script src="https://cdn.jsdelivr.net/vue/2.2.6/vue.min.js"></script>
  <script src="http://app.moptym.com/cdn/vue-waterfall/vue-waterfall.min.js"></script>
  <script src="./common/js/item-factory.js"></script>
  &