六碗铁biu_ 的博客

需求：实现如图所示的瀑布流布局（左右item宽度相同，但高度不同，形成高度差布局）分析：1. 每个item由一张图片和下方的文字构成2. 通过改变图片的高度，实现整体item的高度差实现方式：1.获取列表2. 遍历，随机生成一定高度范围内的数组，将"height:xxxpx；"的style样式，给每一个img标签3. 声明两个变量：左侧总高度，右侧总高度4. 遍历，if左侧总高>=右侧总高，item应分配在左侧，否则，item分配在右侧5. item样式均.

.text-line-2{ overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}参考资料：https://www.cnblogs.com/xuan520qing/p/7404829.htmlhttps://developer.mozilla.org/zh-CN/docs/Web/CSS.

vue过滤器用于格式化一些数据，比如英文转换大小写，价格转换小数点后两位格式可以全局注册/局部使用示例(全局注册)datetime不足两位补0import Vue from 'vue'/** * 时间数据处理 */Vue.filter('filterTime', function (value) { if (!value) return '' if (value.indexOf(':') === -1) return value let result = ''

Vue项目封装axios.config.js文件用于项目中所有网络请求// axios 配置import Vue from 'vue'import axios from 'axios'// 设置 axios 请求 baseUrlaxios.defaults.baseURL = 'http://api.xxx.xxx/'/** * 设置拦截器，interceptors 响应处理， * 所有使用 axios 发送的请求，在请求发送出去之前，都会进入到方法中 * 在这里，为所有请求.

display:flex;此属性下的所有原生相当于一个个item，对所有item进行布局。以下为主轴和交叉轴。1.align-items 交叉轴方向对齐方式flex-start 上对齐flex-end 下对齐center 垂直居中baseline 基线对齐stretch 若item排列方向为交叉轴，所有item宽度为主轴宽度。反之，item高度为交叉轴高度。2.flex-direction 方向row 主轴方向...