使用Vue实现瀑布流的示例代码

更新时间：2024年02月06日 10:59:44 作者：天使的同类

这篇文章主要为大家详细介绍了如何使用Vue实现瀑布流,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以跟随小编一起学习一下

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

<!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" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >
  <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>
  <script>

    var app = new Vue({
      el: '#app',
      components: {
        'waterfall': Waterfall.waterfall,
        'waterfall-slot': Waterfall.waterfallSlot
      },
      data: {
        align: 'center',
        items: ItemFactory.get(100),
        isBusy: false
      },
      methods: {
        addItems: function () {
          if (!this.isBusy && this.items.length < 500) {
            this.isBusy = true
            this.items.push.apply(this.items, ItemFactory.get(50))
          }
        },
        shuffle: function () {
          this.items.sort(function () {
            return Math.random() - 0.5
          })
        },
        reflowed: function () {
          this.isBusy = false
        }
      }
    })

    document.body.addEventListener('click', function () {
      app.shuffle()
      // app.$refs.waterfall.$emit('reflow') // manually trigger reflow action
    }, false)

    window.addEventListener('scroll', function () {
      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      if (scrollTop + window.innerHeight >= document.body.clientHeight) {
        app.addItems()
      }
    })

  </script>
</body>

</html>

如图所示：

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

<!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>Horizontal Line</title>
  <link rel="stylesheet" href="./common/css/style.css" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >
  <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 :line="line" :line-gap="200" :min-line-gap="180" :max-line-gap="220" :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>
  <script>

    var app = new Vue({
      el: '#app',
      components: {
        'waterfall': Waterfall.waterfall,
        'waterfall-slot': Waterfall.waterfallSlot
      },
      data: {
        line: 'h',
        items: ItemFactory.get(100),
        isBusy: false
      },
      methods: {
        addItems: function () {
          if (!this.isBusy && this.items.length < 500) {
            this.isBusy = true
            this.items.push.apply(this.items, ItemFactory.get(50))
          }
        },
        shuffle: function () {
          this.items.sort(function () {
            return Math.random() - 0.5
          })
        },
        reflowed: function () {
          this.isBusy = false
        }
      }
    })

    document.body.addEventListener('click', function () {
      app.shuffle()
      // app.$refs.waterfall.$emit('reflow') // manually trigger reflow action
    }, false)

    window.addEventListener('scroll', function () {
      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      if (scrollTop + window.innerHeight >= document.body.clientHeight) {
        app.addItems()
      }
    })

  </script>
</body>

</html>

如图所示：

3.宽高不限制，每个色块顺着排

<!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 With Grow</title>
  <link rel="stylesheet" href="./common/css/style.css" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >
  <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 :grow="grow" :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>
  <script>

    var app = new Vue({
      el: '#app',
      components: {
        'waterfall': Waterfall.waterfall,
        'waterfall-slot': Waterfall.waterfallSlot
      },
      data: {
        grow: [3, 2, 1, 2],
        items: ItemFactory.get(100),
        isBusy: false
      },
      methods: {
        addItems: function () {
          if (!this.isBusy && this.items.length < 500) {
            this.isBusy = true
            this.items.push.apply(this.items, ItemFactory.get(50))
          }
        },
        shuffle: function () {
          this.items.sort(function () {
            return Math.random() - 0.5
          })
        },
        reflowed: function () {
          this.isBusy = false
        }
      }
    })

    document.body.addEventListener('click', function () {
      app.shuffle()
      // app.$refs.waterfall.$emit('reflow') // manually trigger reflow action
    }, false)

    window.addEventListener('scroll', function () {
      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      if (scrollTop + window.innerHeight >= document.body.clientHeight) {
        app.addItems()
      }
    })

  </script>
</body>

</html>

如图所示：

到此这篇关于使用Vue实现瀑布流的示例代码的文章就介绍到这了,更多相关Vue瀑布流内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue+element-ui+sortable.js实现表格拖拽功能
这篇文章主要为大家详细介绍了vue+element-ui+sortable.js实现表格拖拽功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
Vue.2.0.5实现Class 与 Style 绑定的实例
本篇文章主要介绍了Vue.2.0.5实现Class 与 Style 绑定的实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-06-06
keep-alive include和exclude无效问题及解决
这篇文章主要介绍了keep-alive include和exclude无效问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-11-11
vue项目中canvas实现截图功能
这篇文章主要为大家详细介绍了vue项目中canvas实现截图功能，截取图片的一部分，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
nginx部署访问vue-cli搭建的项目的方法
本篇文章主要介绍了nginx部署访问vue-cli搭建的项目的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-02-02
vue封装公共方法的实现代码
这篇文章给大家介绍了vue封装公共方法的实现,文章中通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
2024-01-01
解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
今天小编就为大家分享一篇解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
Vue中的虚拟dom分享
虚拟DOM是一种用JavaScript对象来描述真实DOM的技术,通过diff算法实现高效的DOM更新,提高页面性能,Vue通过render函数和VNode实现虚拟DOM,结合diff算法减少DOM操作,提升用户体验
2024-12-12
前端vuex中dispatch的使用方法总结
这篇文章主要给大家介绍了关于前端vuex中dispatch使用方法的相关资料,vuex的dispatch方法用于触发一个action,以便更新state,文中通过代码介绍的非常详细,需要的朋友可以参考下
2024-04-04
vue实现数字变换动画的示例代码
本文主要介绍了vue实现数字变换动画的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-04-04

使用Vue实现瀑布流的示例代码

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具