# yinpeng-npm

> xxx plugin

Latest version **1.0.0** (published 2018-03-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install yinpeng-npm
pnpm add yinpeng-npm
yarn add yinpeng-npm
bun add yinpeng-npm
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2018-03-25 |
| First published | 2018-03-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 3.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | yinpeng |
| Maintainers | yingpeng |

## Links

- npm: https://www.npmjs.com/package/yinpeng-npm
- npm.io page: https://npm.io/package/yinpeng-npm

## Recent versions

- 1.0.0 (latest) — 2018-03-25

## README

## 流程:

## 1. 注册一个npm账号

## 2. 创建一包文件夹(名字自己取，不要和NPM上已有的包名重复冲突就好)

## 3. npm int

## 4. 创建index.js  README.md

## 5. npm adduser (使用终端命令行 如果是第一次发布包，执行以下命令，然后输入前面注册好的NPM账号，密码和邮箱，将提示创建成功)

## 6.npm login (如果不是第一次发布包，执行以下命令进行登录，同样输入NPM账号，密码和邮箱)

## 7.注意：npm adduser成功的时候默认你已经登陆了，所以不需要再进行npm login了

## npm publish(进入项目文件夹下 发布包)

## npm ERR publish 403
You do not have permission to publish 'bootstrap'.Are you logged in as
the corrent user?:bootstrap
(npm 已经有此包)

## myMacBook-Pro:sugars_demo sugars$ npm publish
+ sugars_demo@1.0.0 (成功)

## 更新已经发布的包
更新包的操作和发布包的操作其实是一样的

npm publish

但要注意的是，每次更新时，必须修改版本号后才能更新，比如将1.0.0修改为1.0.1后就能进行更新发布了。 这里的包版本号有一套规则，采用的是semver（语义化版本），通俗点意思就是版本号：大改.中改.小改


## md语法:

![](http://oqhtscus0.bkt.clouddn.com/74f00b858ebdc430e780aa1da6ca0ce1.jpg-muyy)

[效果展示](http://muyunyun.cn/waterfall)

[该插件在 React 项目中的运用](https://github.com/MuYunyun/reactSPA/blob/master/src/common/pages/waterfall/index.js)

### feature

- [x] 支持同步/异步获取图片数据(基于发布/订阅模式)

- [x] 按需加载(每次渲染指定的条数)

- [x] 兼容各尺寸的屏幕

- [x] 无依赖(打包 JS 文件 4 kb)

- [x] 较好的扩展性

- [ ] 图片懒加载

- [ ] 兼容性扩展

- [ ] UI 优化

### usage

```bash
npm install jswaterfall --save
```

```js
window.onload = function() {
  const waterfall = new Waterfall({
    number: 20,                 // 一次性加载的图片个数；必填
    // fixWidth: 1250,          // 容器 width: 选填：填上后会使 window.resize 失效，fixWidth 属性优先级大于 width 属性
    // width: 1250,             // 容器 width；选填: 默认为浏览器的宽度，(后期考虑可以设置为某个节点的宽度)
    // container: 'waterfall',  // 容器 id；选填：默认为 'waterfall'
    // scrollElem: 'content',   // 绑定 scroll 的节点 id，默认为 window
  })

  waterfall.on("load", function () {
    // 模拟 ajax 异步添加图片
    setTimeout(function () {
      const $waterfall = document.getElementById('waterfall')
      for (let i = 0; i < 20; i++) {
        const img = document.createElement('img')
        img.setAttribute('src', `images/${i + 1}.png`)
        img.setAttribute('class', 'waterfall-box')
        $waterfall.appendChild(img)
      }
      waterfall.done() // 同步/异步写法都要加上这句，通知加载完成
    }, 1000)
  })
}
```

---
_Source: https://npm.io/package/yinpeng-npm · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._