跳至主要內容
瀑布流布局步骤

瀑布流布局

  • 父容器相对定位，成员绝对定位
    • 利用top与left属性控制位置
  • 记录每一列的高度
    • 每次新增加成员时找到高度最低的那个将成员置于其下方
  • 一些细节
    • 一次性加载供展示
      • flex布局
        • flex-direction:column
        • flex-wrap:wrap
    • 动态插入数据
yyshino大约 3 分钟ComponentTool/Demo
轮播图实现步骤

轮播图实现思路

大概思路

  1. 创建轮播图容器
    1. flex实现图片水平布局
    2. position的绝对定位与相对定位实现轮播图
    3. overflow: hidden;将其他图片隐藏
  2. 轮播实现
    1. js实现
      1. 定时器实现图片不断左移
      2. 边缘处理
        1. 将第一张轮播图追加到一行图片之后，当切换到最后一张轮播图时，下一张即播放第一张图，当此图轮播完成后，将所有图片归位
    2. css实现
      1. 动画animate。 有一定限制
  3. 其他细节
    1. 根据图片数量，创建底部按钮
yyshino大约 5 分钟ComponentTool/Demo
自动化部署git项目

创建部署脚本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 -
yyshino小于 1 分钟ComponentTool/Demo
优质整合

打造自己的开源库

整合组件 | 便于封装 | 建立属于自己的开源库 | 造轮子做准备

yyshino小于 1 分钟ComponentTool/Demo