npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

strange-vue-waterfall-plugin

v3.3.2

Published

<!-- * @Description: * @Version: 2.0 * @Author: Yaowen Liu * @Date: 2021-10-18 16:22:04 * @LastEditors: Yaowen Liu * @LastEditTime: 2023-02-28 16:33:29 -->

Downloads

3

Readme

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 内没有再次触发才刷新布局。(图片加载完成;容器大小、listwidthgutterhasAroundGutter变化时均会触发刷新) |

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;
}