用vue.js写的一个瀑布流的组件

很少写文章，很乱，，见谅。

我所见过的瀑布流都是固定的几列，然后每一列包含若干个元素（图文元素），每一列的总高度都差不多。
所以我这个组件的功能就很简单，可以设置列数量，然后只要再写一个渲染元素的方法，即可使用。

组件说明

组件名：<tag-autoflow />

参数名	类型	说明
data	Array	数据源
column_size	Number	列的数量
renderItem	Function	目前只能通过render函数渲染子元素，还不支持模板。有三个参数 h, item,将被渲染的元素 next,是一个function，在渲染子元素的合适时机（例如img的onload事件里），调用next()即可。如不调用next将只能渲染一个元素，无法继续渲染。

源代码在此

一个简单的使用例子如下：

export default {data() {// 随机生成20个测试数据const num = 20;var list = new Array(num).fill(0).map((v, i) => {return this.createItem(i);})return {list,}},// 直接用render函数来写，因为我觉得这样写props更直观一点render(h){return h('tag-autoflow', {props:{// 设置列数量column_size:3,// 数据源data: this.list,// 渲染item的方法，参数目前提供三个// h 瀑布流组件的createElement方法，非父组件的// item 要渲染的元素对象// next 必须主动调用next，插件才会自动去渲染下一个元素，详细说明见下文renderItem(h, item, next){// 简单的渲染一个img跟一个p标签// 因为img标签的图片加载需要时间，而图片影响了计算所在列的高度// 所以需要在img触发了load事件后，再去调用next渲染下一个item。return h('div', [h('img', {attrs: {src: item.img},on: {load: e => {next();}}}),h('p', item.title)])},},});},methods:{createItem(i) {var title = i + ',' + new Array(_.random(10, 150)).fill('哈').join('');var img = `http://via.placeholder.com/${_.random(100, 400)}x${_.random(100, 400)}`;return {img,title,}},}
}

放一张渣渣效果图吧。。。

代码里是一次性生成的20个元素，页面渲染的时候，很明显的能看出来是在一个img触发了load事件之后才渲染下一个元素。
如果花点心思加一些动画效果应该很酷吧。

如果你要渲染的item不包含图片，纯文字的话，可以通过这种写法调用next。保证了计算列高度的准确性。

renderItem(h, item, next){this.$nextTick(function(){next();});return h('p', item.title);
},

瀑布流的流程说明

先根据参数生成对应数量的列，
判断data是否有元素，没有就结束。
从data里面shift()拿到一个元素item，
找出当前高度最小的一列，将item放入该列。
渲染item，然后调用next()方法进入2

TODO

瀑布流还有个常见的功能就是滚动加载了，目前尚未加入此功能，会尽快加上。
元素加载的过渡动画

用vue.js写的一个瀑布流的组件相关推荐

自己用jQuery写一个瀑布流
自己用jQuery写一个瀑布流前言这个月一直在忙工作.一直没有机会学习新的知识.前两天,突然想写一个瀑布流代码.倒不是找不到瀑布流代码.而是我想自己练练脑子. 首先,先考虑思路.所有的图片,全部采 ...
vue环境简单实现动态瀑布流效果
vue环境简单实现动态瀑布流效果最近开发项目需要实现动态瀑布流效果,项目本身是vue环境,网上很难找到类似的效果,vue-waterfall插件,懂的都懂.看了源码就知道不符合我项目目前的场景.(列 ...
用vscode实现vue.js项目的一个完整过程
1.新建项目打开Visual studio code 打开一个你想要创建项目的文件夹打开集成终端:查看 –> 集成终端或者直接按 ctrl+` 如果没有安装vue-cli,在终端输入: n ...
go html vue,用Go+Vue.js快速搭建一个Web应用(初级demo)
Vue.js做为目前前端最热门的库之一,为快速构建并开发前端项目多了一种思维模式.本文给大家介绍用Go+Vue.js快速搭建一个Web应用(初级demo). 环境准备: 1. 安装go语言,配置go开 ...
用JS写了一个模拟串行加法器
在重温<编码:隐匿在计算机软硬件背后的语言>第12章--二进制加法器时,心血来潮用JS写了一个模拟串行加法器. 测试断言工具TestUtils.js function assertTrue ...
Java写js的Ajax代码_用JS写的一个Ajax库(实例代码)
myajax是一个用js编写的一个跨浏览器的ajax库,支持get, post, jsonp请求,精巧,简单. 一.发送GET请求: myajax.get({ data: {}, //参数 url: ...
原生 JS 实现一个瀑布流插件
更好的阅读体验,点击原文地址瀑布流布局中的图片有一个核心特点 -- 等宽不定等高,瀑布流布局在国内网网站都有一定规模的使用,比如pinterest.花瓣网等等.那么接下来就基于这个特点开始瀑布流探 ...
利用JS实现简单的瀑布流效果
转载:https://www.cnblogs.com/dyx-wx/p/4642637.html 一.瀑布流之准备工作首先声明下, 为了方便演示和联系, 我使用的是本地图片, 如果大家有需要的话 ...
js实现响应式瀑布流
导读:瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.最早采用此布局的网站是Pinterest ...