瀑布流布局
- 父容器相对定位,成员绝对定位
- 利用
top与left属性控制位置 
 - 利用
 - 记录每一列的高度
- 每次新增加成员时找到高度最低的那个将成员置于其下方
 
 - 一些细节
- 一次性加载供展示
- flex布局
flex-direction:columnflex-wrap:wrap
 
 - flex布局
 - 动态插入数据
 
 - 一次性加载供展示
 
大约 3 分钟
top与left属性控制位置flex-direction:columnflex-wrap:wrap防抖:动作绑定事件,动作发生后一定时间后触发事件,在这段时间内,如果该动作又发生,则重新等待一定时间再触发事件。
几种实现
function debounce(func,time){
	let timer = null;
	return () => {
		clearTimerout(timer); // 事件再次触发,清除定时器 
		timer = setTimeout(() => { // 等待time时间后,再触发事件
			func.apply(this,arguments);
		},time);
	}
}
/**
 * 快速书写一个防抖函数
 * @description 只要一直调用, callback 将不会被触发
 * 在一次调用结束后, 只有等待 timeout ms 时间, 才能继续调用 callback
 * immediate 决定触发时机
 * @example 
 * 1. 点击按钮发送请求(保存数据之类的)
 * 2. 搜索时自动联想
 * 3. 自动保存
 * 4. Debouncing a resize/scroll event handler
 */
function debounce(callback, timeout, immediate) {
  let timer;
  return function () {
    const context = this; // 持有执行上下文
    const args = arguments; // 记录传参
    const later = function () {
      timer = null; // 贤者时间过了,重振旗鼓,重置为初始状态
      if (!immediate) callback.apply(context, args); // 设置为尾部调用才延时触发
    }
    const callNow = immediate && !timer; // 如果确认允许首部调用,且首次调用,那么本次立即触发
    clearTimeout(timer); // 杀掉上次的计时器,重新计时
    timer = setTimeout(later, timeout); // 重启一个计时器,过了贤者时间之后才触发
    callNow && callback.apply(context, args); // 设置为首部调用立即触发
  }
}
大概思路
flex实现图片水平布局position的绝对定位与相对定位实现轮播图overflow: hidden;将其他图片隐藏js实现
css实现
animate。 有一定限制deploy.sh    #!/usr/bin/env sh
    # 确保脚本抛出遇到的错误
    set -e
    # 生成静态文件
    npm run build
    # 进入生成的文件夹
    cd docs/.vuepress/dist
    # 如果是发布到自定义域名
    # echo 'www.yourwebsite.com' > CNAME
    git init
    git add -A
    git commit -m 'deploy'
    # 如果你想要部署到 https://USERNAME.github.io
    git push -f git@github.com:USERNAME/USERNAME.github.io.git master
    # 如果发布到 https://USERNAME.github.io/<REPO>  REPO=github上的项目
    # git push -f git@github.com:USERNAME/<REPO>.git master:gh-pages
    cd -