流程:

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

• [email protected] (成功)

更新已经发布的包

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

npm publish

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

md语法:

效果展示

该插件在 React 项目中的运用

feature

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

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

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

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

• [x] 较好的扩展性

• [ ] 图片懒加载

• [ ] 兼容性扩展

• [ ] UI 优化

usage

npm install jswaterfall --save

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