QRL909109 / PhotoWall-by-react

one photo gallery based on React

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

PhotoWall-by-react

这是跟着慕课网与MaterLiu老师学习的 #React实践图片画廊应用 自己的代码没有使用React-webpack,考虑到学习成本大,以后补上index.js只是为了书写方便,和index.html里面的内容一样。

图片画廊的思路如下:

  • GalleryByReactApp(主控制)
  • ___ImgFigure(画廊图片:分配中心 旋转属性)
  • ___ControllerUnit(控制按钮:分配中心 旋转属性)
  • 主控组包含 画廊按钮,并拥有中心 旋转的操作权利,通过控制Sate,做到其中一个改变,另一个跟着改变。

    画廊图片分布为左 右 上 区域,通过计算范围,给不同位置的图片设定不同状态(是否中心(is-center) 是否旋转(is-inverse) 位置如何)。

    通过点击图片时,判断是否为中心图片,进行旋转,或重新排列新的图片位置(rearrange)。

    控制按钮通过是否 旋转(is-inverse) 中心(is-center)进行选择,并作出不同判断。

    About

    one photo gallery based on React


    Languages

    Language:HTML 45.5%Language:JavaScript 43.5%Language:CSS 11.0%