jQuery木桶流图片布局插件 v1.0.0

DEMO

在线演示

原理

Install

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="./iboot.js"></script>

Use

初始化

  <div class="iboot-controller clear">

  </div>

.clear:after {
  content: '';
  display: block;
  clear: both;
  width: 100%;
}

var iboot = new Iboot($('.iboot-controller'), {
  list: [
    {
      src: 'https://picsum.photos/600/600',
      alt: 'xxx'
    }
    ...
  ]
})

Iboot参数

Iboot(ele, config)

ele

当前选中的元素

config

• list
• baseHeight
• template
• afterLoad
• beforeLoad
• resize
• loadMore

list

图片列表

[
  {
    src: '',
    alt: 'xxx'
  }
]

baseHeight

基准高度，图片会再次基础上放大或缩小，默认 400。

template

模板函数，此方法允许你在渲染的时候操作dom，以完成对列表自定义的一些操作，必须返回操作后的dom。

template: function (dom) {
  dom.addClass('some')
  return dom
}

beforeLoad

加载图片前的回掉函数

afterLoad

加载图片后的回调函数

resize

此方法会对列表重新排版，用于窗口大小改变的时候。

$(window).resize(function () {
  iboot.resize()
})

loadMore

加载更多图片

iboot.loadMore([
  {
     src: 'xxx',
     alt: 'xxx'
  }
])

请我喝杯咖啡，支持更多开源

LICENSE

MIT