通过vue写一个瀑布流插件代码实例

这篇文章主要介绍了通过vue写一个瀑布流插件代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

效果如图所示：

采用了预先加载图片，再计算高度的办法。。网络差的情况下，可能有点卡

新建 vue-water-easy.vue 组件文件

.vue-water-easy{
  width: 100%;
  display: flex;
  justify-content: space-between;
  div.colsW{
    flex: 1;
    box-sizing: border-box;
    position: relative;
    &:last-child{
      margin-right: 0 !important;
    }
    &:first-child{
      margin-left: 0 !important;
    }
    ul{
      list-style: none;
      width: 100%;
      li{
 width: 100%;
      }
    }
  }  
}

使用

imgsArr：为图片数据的数组，内部包含对象 [ { src:"xxxx" } ]

srckey : 为图片路径的属性，默认为 src

maxCols: 多少列 默认为 3

gap ： 每列的间距默认 10px

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。