瀑布流布局
- 父容器相对定位,成员绝对定位
- 利用
top
与left
属性控制位置
- 利用
- 记录每一列的高度
- 每次新增加成员时找到高度最低的那个将成员置于其下方
- 一些细节
- 一次性加载供展示
- flex布局
flex-direction:column
flex-wrap:wrap
- flex布局
- 动态插入数据
- 一次性加载供展示
大约 3 分钟
top
与left
属性控制位置flex-direction:column
flex-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 -