2.1.0 • Published 4 years ago
iboot-layout v2.1.0
iboot
木桶图片流布局
barrel image stream layout
How it work?
Install
npm install iboot-layout
or
yarn add iboot-layout
or
<script src="https://cdn.jsdelivr.net/npm/iboot-layout@2.1.0/dist/iboot.min.js"></script>
Use
import Iboot from 'iboot-layout'
let photos = new Iboot(document.getElementById('box'), {
list: [
{
src: 'http://xxxx',
alt: 'my-photo'
}
...
],
baseHeight: 300,
})
Api
new Iboot(element, config = {
list: [
{
src: 'http://xxxx',
alt: 'my-photo'
}
],
baseHeight: 400,
render: function(item) {
return item
},
resize: false,
hideHeight: 300,
resizeTime: 100
})
element
pass in the initialized dom element
new Iboot(document.getElementById('xxx'))
config
config.list
the rendered image array.
config.list = [
// normal image
{
src: 'http://xxxx', // address
alt: 'my-photo' // image alt
},
// special placeholder
{
type: 'block', // type:block
width: 300, // width
height: 80, // height
render(ele) { // render function
// @ele parent element
ele.innerHTML = '<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.render = function(element, item) {
// @element currently rendered element
// @item current item information
// eg
item.className += ' 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 = new Iboot(...)
photo.resize()
Iboot.loadMore
load more
let photo = new Iboot(...)
photo.loadMore(@config.list)
Iboot.destroy
destroy the instance
let photo = new Iboot(...)
photo.destroy()
2.1.0
4 years ago