iboot
木桶图片流布局
barrel image stream layout
How it work?
Install
npm install iboot-layout
or
yarn add iboot-layout
or
Use
let photos = document list: src: 'http://xxxx' alt: 'my-photo' ... baseHeight: 300
Api
element config = list: src: 'http://xxxx' alt: 'my-photo' baseHeight: 400 { return item } resize: false hideHeight: 300 resizeTime: 100
element
pass in the initialized dom element
document
config
config.list
the rendered image array.
configlist = // normal image src: 'http://xxxx' // address alt: 'my-photo' // image alt // special placeholder type: 'block' // type:block width: 300 // width height: 80 // height { // render function // @ele parent element eleinnerHTML = '<span>show</span>' }
config.baseHeight
default: 300
the base height of the picture, all picture zooming are based on this base height.
config.render
allow users to override the render method and customize each rendering list. The render method needs to return a custom element
config { // @element currently rendered element // @item current item information // eg itemclassName += ' some' return item}
config.resize
default: true
whether to re-render the arrangement according to the zoom of the browser window.
config.hideHeight
default: 300
when rendering, if the target height zoom ratio exceeds this number, it will be hidden.
config.resizeTime
default: 100
configure the frequent call interval when the browser window is changed, the unit is ms
.
methods
instance method
Iboot.resize
arrange again
let photo = ...photo
Iboot.loadMore
load more
let photo = ...photo
Iboot.destroy
destroy the instance
let photo = ...photo