dl-borderless

dl-borderless 是一个可以无边界瀑布流渲染图片列表的插件。

安装

通过 NPM 安装

npm i dl-borderless -S

CDN

目前可以通过 unpkg.com/dl-borderless 获取到最新版本的资源，在页面上引入 js 文件即可开始使用。

<script src="https://unpkg.com/[email protected]/lib/dl-borderless.js"></script>

Attrs

| 名称 | 描述 | 类型 | 默认值 | 必传 | | - | - | - | - | - | | el | 指定 dl-borderless 渲染的 DOM 父节点 | DOM | document.body | false | | className | 指定 dl-borderless 渲染的 DOM 节点的类名 | String | '' | false | | width | 指定 dl-borderless 渲染的 DOM 节点的宽度 | Number | window.innerWidth | false | | height | 指定 dl-borderless 渲染的 DOM 节点的高度 | Number | window.innerHeight | false | | draggable | 图片界面是否拖拽 | Boolean | true | false | | boxWidth | 图片渲染的宽度 | Number | 150 | false | | boxHeight | 图片渲染的高度。数组表示随机的范围 | Number, Array | [150, 300] | false | | boxPadding | 图片渲染的内间距 | Number | 1 | false | | maxSize | 图片的最大存储数量，超出后会移除隐藏的图片，减少内存消耗。图片懒加载时，超出后不再调用加载方法。 | Number | 500 | false | | mouseHover | 图片的hover效果 | Boolean | false | false | | animation | 图片界面位移动画 | Boolean | false | false | | animationSpeed | 位移动画的速度。x，y分别表示两个方向的移动速度。 | Object | {x:0,y:0} | false | | data | 图片列表数据。图片(imageItem)详细数据见下表。 | Array | [] | false | | loadData | 图片列表数据懒加载。返回一个Promise，数据通过Promise传递 | Function | - | false | | loadFinished | 没有更多数据，不再调用懒加载请求函数 | Boolean | true | false |

Methods

| 名称 | 描述 | 参数 | | - | - | - | | draw | 绘制列表界面 | - | | setSpeed | 设置动画运动速度 | Object | | stop | 停止动画运动 | - | | start | 开始动画运动 | - |

Events

| 名称 | 描述 | 参数 | | - | - | - | | onclick | 图片点击事件 | 图片对象 |

ImageItem

| 名称 | 描述 | 类型 | 默认值 | 必传 | | - | - | - | - | - | | url | 图片的链接地址 | String | - | true | | width | 图片的宽度。如果传入了图片的宽、高数据，那么图片的高度将按比例计算，不采用 boxHeight。 | Number | - | false | | height | 图片的高度。如果传入了图片的宽、高数据，那么图片的高度将按比例计算，不采用 boxHeight。 | Number | - | false |