heikaimu / vue-waterfall-plugin Goto Github PK

View Code? Open in Web Editor NEW

232.0 2.0 38.0 3.85 MB

vue 瀑布流插件，支持 PC 和移动端，支持 animate 的所有动画效果，支持图片懒加载

Home Page: https://vue-waterfall.netlify.app/

Vue 53.29% JavaScript 45.27% CSS 0.15% HTML 1.29%

vue waterfall-layout animation-css lazyload-images

vue-waterfall-plugin's Introduction

Vue2 瀑布流组件

vue 瀑布流插件，支持 PC 和移动端，支持 animate 的所有动画效果，支持图片懒加载

在线演示地址

vue3 版本

安装

npm install vue-waterfall-plugin

使用

import { LazyImg, Waterfall } from 'vue-waterfall-plugin'
import 'vue-waterfall-plugin/dist/style.css'

<Waterfall :list="list">
  <template #item="{ item, url, index }">
    <div class="card">
      <LazyImg :url="url" />
      <p class="text">这是内容</p>
    </div>
  </template>
</Waterfall>

data: {
  list: [
    {
      src: "xxxx.jpg",
      ...
    }
    ...
  ]
}

作用域插槽返回了3个字段： item 原始数据, url 图片资源, index 卡片索引

`Props` 参数

参数名	类型	默认值	描述
`list`	`Array`	[]	列表数据
`rowKey`	`String`	`id`	数据唯一的字段，比如列表里面的`id`, 如果要删除卡片，该字段为必填
`imgSelector`	`String`	`src`	图片字段选择器，如果层级较深，使用 `xxx.xxx.xxx` 方式
`width`	`Number`	`200`	卡片在 PC 上的宽度
`breakpoints`	`Object`	`breakpoints`	自定义行显示个数，主要用于对移动端的适配
`gutter`	`Number`	`10`	卡片之间的间隙
`hasAroundGutter`	`Boolean`	`true`	容器四周是否有 `gutter` 边距
`animationPrefix`	`String`	`animate__animated`	`animate.css` 的动画绑定 `className`，默认的是 `4.x.x` 版本，如果想使用老版本，只需要改成 `animated` 即可
`animationEffect`	`String`	`fadeIn`	卡片入场动画，默认只有 `fadeIn`，引入 `animation.css` 后可使用其他动画
`animationDuration`	`Number`	`1000`	动画执行时间（单位毫秒）
`animationDelay`	`Number`	`300`	动画延迟（单位毫秒）
`backgroundColor`	`String`	`#ffffff`	背景颜色
`loadProps`	`Object`	`loadProps`	加载的图片和失败的图片
`lazyload`	`Boolean`	`true`	是否开启懒加载
`delay`	`Number`	`300`	布局刷新的防抖时间，默认 `300ms` 内没有再次触发才刷新布局。（图片加载完成；容器大小、`list`、`width`、`gutter`、`hasAroundGutter`变化时均会触发刷新）

breakpoints

breakpoints: {
  1200: { //当屏幕宽度小于等于1200
    rowPerView: 4,
  },
  800: { //当屏幕宽度小于等于800
    rowPerView: 3,
  },
  500: { //当屏幕宽度小于等于500
    rowPerView: 2,
  }
}

loadProps

import loading from 'assets/loading.png'
import error from 'assets/error.png'
loadProps: {
  loading,
  error
}

懒加载图片样式覆盖，需要将覆盖样式放在全局才能生效

.lazy__img[lazy=loading] {
  padding: 5em 0;
  width: 48px;
}

.lazy__img[lazy=loaded] {
  width: 100%;
}

.lazy__img[lazy=error] {
  padding: 5em 0;
  width: 48px;
}

vue-waterfall-plugin's People

Contributors

Stargazers

Watchers

vue-waterfall-plugin's Issues

nuxt2.0引用会有服务端错误documentis not defined

看了下源码应该dom.js这边引用直接执行了创建div，希望能修复下这个

请问一下 vue 2， LazyImg 是否不能用 animate.cc？

我看在线演示地址也并不能看到动画效果

当浏览器宽度小于1200时，如果waterfall宽度并非浏览器宽度时(例如有侧边栏)，会超出浏览器宽度

非常感谢这个项目，使用起来非常简单，效果也很好！

这里有一个问题：

  data () {
    return {
      screenWidth: document.body.clientWidth,
      itemsGutter: [],
      itemsPosX: [],
      canRun: true
    }
  },
  computed: {
    itemWidth() {
      const { screenWidth, gutter, width, phoneCol } = this;
      if (screenWidth >= 1200) {
        return width;
      } else {
        return (screenWidth - (phoneCol + 1) * gutter) / phoneCol;
      }
    }
  },

当浏览器宽度小于1200时，会重新计算waterfall的宽度。计算的公式是(screenWidth - (phoneCol + 1) * gutter) / phoneCol。这里不应该取screenWidth,应该取parent的宽度来计算，否则页面可能会超过浏览器宽度。

请问，是否有办法在父组件覆盖itemWidth函数，或者作者帮忙更新一下？

Cannot read property 'clientWidth' of undefined

Uncaught TypeError: Cannot read property 'clientWidth' of undefined
    at VueComponent.resize (webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!
./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./node_modules/vue-waterfall-plugin/lib/Waterfall.vue?vue&type=script&lang=js&:237)
    at eval (webpack-internal:///./node_modules/vue-waterfall-plugin/lib/utils/debounce.js:8)

Cannot read property 'clientWidth' of undefined

Waterfall.vue?27e0:215 Uncaught TypeError: Cannot read property 'clientWidth' of undefined
at VueComponent.resize (Waterfall.vue?27e0:215)
at eval (debounce.js?167e:7)

页面纵向一开始是堆叠在一起的 transitonY是没有生效

我是f12用调试工具模拟移动端预览页面，出现这个问题，当我退出f12全屏，又重新进入f12，相当于重新计算一次，此时则正常

关于1200分辨率阈值的问题

个人感觉1200宽的分辨率也可以显示很多信息，无需被视为低分辨率设备，如11寸ipad pro的浏览器分辨率为834*1194，略有些尴尬。请问是否可以增加用户自定义分辨率阈值的入口？

页面使用多个组件出现异常

1.一个页面使用了n个子组件，这个数量是动态的，根据接口配置
2.子组件使用了瀑布流组件做布局，会出现部分子组件高度坍塌

图片加载完后图片位置没有正确定位

data 请求完放入list属性后，看到图片渲染完，图片位置不对，像没有计算出定位

希望可以移除sass

安装后运行提示缺少依赖，安装sass后还是报错，搜索了一下是sass版本太高，降低版本才解决

调试了半天，原来是加了elementUI的依赖，希望作者能在readme里面注明完善一下

如题，谢谢作者！！！
加油！！

该项目克隆下来 npm install 然后npm run dev报错

懒加载的第一次加载图片。

懒加载的第一次加载图片，chorom Network 数据项会显示同一张图片会加载两次而且Status项非 304， size项非memorychache。这是为什么？

苹果版本9.2(13c75)浏览器下只有一列

在waterfall.vue中const cols = Math.max(Math.floor((gridWidth - gutter) / gridItemWidth), 1);这个会取值为1相同屏幕尺寸一个有俩列一个只有一列

提几点建议

增加一个等高的显示方案
在有充足的数据前提下，预先设置 img 的 div 父组件的宽高为 img 的宽高，background-color 属性设置为 img 目标图像的主色调，像 Twitter 那样，在图片还没加载完成时能获得一个较好的体验。

可以的话希望能考虑一下。

谢谢

export function loadImage(url) {
return new Promise((resolve, reject) => {
const image = new Image()
image.onload = () => {
resolve(image)
}
image.onerror = () => {
reject(new Error('Image load error'))
}
image.crossOrigin = 'Anonymous' // 支持跨域图片
image.src = url
})
}