Skip to content

MuYunyun/waterfall

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

16 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

jswaterfall

效果展示

该插件在 React 项目中的运用

feature

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

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

  • 兼容各尺寸的屏幕

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

  • 较好的扩展性

  • 图片懒加载

  • 兼容性扩展

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

About

原生JS实现的瀑布流插件

Resources

Stars

Watchers

Forks

Packages

No packages published