A componet of waterfall layout

Requires

Element Plus

Install

  npm i waterfall-lkf

Import

  import WaterfallLkf from 'waterfall-lkf'
  ...
  const app = createApp(App)
  app.use(WaterfallLkf)
  app.mount('#app')
  ...

Props

cols: require, cols number of waterfall, value range from 1 to 12, e.g. `<waterfall-lkf :cols="2">`

medias: require, media list of waterfall, image or video, e.g. `<waterfall-lkf :medias="xxx">`

if need custom background, you can use loadingBackground, e.g. `<waterfall-lkf loadingBackground="rgba(255, 255, 255, 0.8)">`

Page

Image demo

  <template>
  <div style="width:100%; height:100%;">
      <waterfall-lkf :cols="cols" :medias="mediaList" loadingBackground="rgba(255, 255, 255, 0.8)">
          <template #slot1="videoItem">
              <div class="media-item">
                  <img style="border-radius: 10px;" :src="videoItem.media.src" width="100%" height="100%">
              </div>
          </template>
          <template #slot2="videoItem">
              <div class="media-item">
                  <img style="border-radius: 10px;" :src="videoItem.media.src" width="100%" height="100%">
              </div>
          </template>
      </waterfall-lkf>
  </div>
  </template>

  <script>
      export default {
          data() {
              return {
                  cols: 2,
                  mediaList: [
                  {
                  id: 1,
                  src: "...",
                  width: 800,
                  height: 534
                  },
                  {
                  id: 2,
                  src: "...",
                  width: 571,
                  height: 381
                  },
                  ...
              ]
          }
      }
  }
  </script>

Video demo

  <waterfall-lkf :cols="cols" :medias="mediaList">
      <template #slot1="videoItem">
        <div class="video-item" @mouseenter="handleMouseEnter($event, videoItem.media.id)"
          @mouseout="handleMouseOut($event, videoItem.media.id)">
          <video class="video-target" :poster="videoItem.media.poster">
            <source :src="videoItem.media.src" type="video/mp4">
            Your browser does not support the video tag.
          </video>
        </div>
      </template>
  </waterfall-lkf>

  <script>
      export default {
          data() {
              return {
                  cols: 2,
                  mediaList: [
                  {
                  id: 1,
                  src: "...",
                  width: 800,
                  height: 534,
                  poster: 'xxx'
                  },
                  {
                  id: 2,
                  src: "...",
                  width: 571,
                  height: 381,
                  poster: 'xxx'
                  },
                  ...
              ]
          },
          methods: {
              handleMouseEnter () {
                  ...
              },
              handleMouseOut () {
                  ...
              }
          }
      }
  }
  </script>