Home

Awesome

jswaterfall

效果展示

该插件在 React 项目中的运用

feature

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