react有很多好玩的组件,react-grid-gallery就是其中一个,主要处理图片展示,对图片进行放大与缩小

文档:https://www.npmjs.com/package/react-grid-gallery

demo:https://benhowell.github.io/react-grid-gallery

gallery的options

images:  图片路径

结构为: [{

src: imgUrl,

thumbnail: imgUrl,

}, {

src: imgUrl,

thumbnail: imgUrl,

}, {

src: imgUrl,

thumbnail: imgUrl,

}]

backdropClosesModal: 用户点击背景是否会隐藏掉modal(boolean)

showCloseButton: 是否显示关闭按钮(boolean)

backdropClosesModal与showCloseButton可以配合使用,达到想要的效果

images中也有一些option

thumbnailWidth:图片宽度

thumbnailHeight: 图片高度

caption: 图片的标题

react组件(react-grid-gallery)的更多相关文章

  1. 野心勃勃的React组件生命周期

    当你还在写着Angular指令,过滤器,注入,服务,提供者,视图模版的时候,是不是觉得很烦,好在这个时候,React已经神一样的出现在历史舞台. React组件    React实现了UI=Fn(St ...

  2. React组件:Dragact 0.1.4发布

    Dragact 是一款React组件,他能够使你简单.快速的构建出一款强大的 拖拽式网格(grid)布局. 仓库地址:Dragact 经过几天的迭代时间Dragact已经能够支持自由缩放功能了(res ...

  3. React 组件性能优化探索实践

    转自:http://www.tuicool.com/articles/Ar6Zruq React本身就非常关注性能,其提供的虚拟DOM搭配上Diff算法,实现对DOM操作最小粒度的改变也是非常的高效. ...

  4. webpack 打包一个简单react组件

    安装Webpack,并加载一个简单的React组件 全局的npm模块安装: npm install -g webpack 安装jsx-loader npm install --save-dev jsx ...

  5. React 组件性能优化

    React组件性能优化 前言 众所周知,浏览器的重绘和重排版(reflows & repaints)(DOM操作都会引起)才是导致网页性能问题的关键.而React虚拟DOM的目的就是为了减少浏 ...

  6. React组件属性部类(propTypes)校验

    React组件属性类型(propTypes)校验 Prop 验证 随着应用不断变大,保证组件被正确使用变得非常有用.为此我们引入propTypes.React.PropTypes 提供很多验证器 (v ...

  7. 使用reflux进行react组件之间的通信

    前言 组件之间为什么要通信?因为有依赖. 那么,作为React组件,怎么通信? React官网说, 进行 父-子 通信,可以直接pass props. 进行 子-父 通信,往父组件传给子组件的函数注入 ...

  8. React组件性能优化

    转自:https://segmentfault.com/a/1190000006100489 React: 一个用于构建用户界面的JAVASCRIPT库. React仅仅专注于UI层:它使用虚拟DOM ...

  9. React组件生命周期过程说明

    来自kiinlam github94 实例化 首次实例化 getDefaultProps getInitialState componentWillMount render componentDidM ...

  10. React组件

    React组件 组件是React中的基本单位,在每个组件里面又封装了程序逻辑,通过reader标出界面片段或者回传一段描述,组件再通过React.renderComponent将组件展示在浏览器中.每 ...

随机推荐

  1. cmd下查看应用端口情况

    在win10开始窗口右侧的空白处点击CMD,在上方弹出窗口中选择命令提示符,双击进入 在弹出命令界面中,输入netstat -na命令后回车,如下图所示,可以看到所有目前打开的端口 如果要查看打开端口 ...

  2. SQL实现数据行列转换

    前言: 在日常的工作中,使用数据库查看数据是很经常的事,数据库的数据非常多,如果此时的数据设计是一行行的设计话,就会有多行同一个用户的数据,查看起来比较费劲,如果数据较多时,不方便查看,为了更加方便工 ...

  3. XP系统安装VS2010失败的解决方法

    今天装了一个双系统,但是在XP系统上安装VS2010的时候就出现了下面的错误 于是在网上搜索各种资源,查看错误日志,网上说是office2007的原因,我也抱着试试看的态度去卸载了,可是卸载后却发现还 ...

  4. FlowPortal-BPM——功能:判断数据库表中字段是否重复并阻止提交或保存

    一.JS添加代码,判断是否有OnSubmit事件 文件位置:YZSoft/Forms/src/Validator.js //=====判断是否有OnSubmit事件===== if (typeof ( ...

  5. thymeleaf的常见问题汇总

    thymeleaf的常见问题汇总 1.thymeleaf th:href 多个参数传递格式 th:href="@{/Controller/update(param1=1,param2=${p ...

  6. elasticsearch(四) 之 elasticsearch常用的一些集群命令

    目录 elasticsearch常用的一些集群命令 查看集群健康状态 查看集群的节点列表 查看所有的索引 删除索引 查询索引的某个文档内容 更新文档 删除文档 自动创建索引 定时删除索引 elasti ...

  7. [笔记] Python 图片转字符画

    一.介绍 用Python 代码完成图片转字符画 二.python 环境 Python 3.6.6 pillow 5.1.0  Python 图像处理库, 需要另外安装 三.原理 gray = 0.21 ...

  8. IOC给程序带来的好处

    IOC(inversion of control)的中文解释是“控制反转”或者“依赖注入”,它的实现目的是:我们可以通过配置文件来控制程序的流程,达到程序代码的优化.初学者往往弄不清楚为什么我们可以通 ...

  9. button按钮被输入法顶起来,遮盖了input输入框

    在做手机端的表单提交的时候,在chrome浏览器调试的时候,忘记输入法会引起布局的问题.在webApp里input输入框,会自动调起输入法,但是输入法会改变浏览器的可视区域的大小.就是会把浏览器可视区 ...

  10. ZJOI2018 Round2 游记

    day0 高铁上颓了一部电影,然后闭上眼睛就到了 醒来之后发现被绑了艹,袖子被打了个结,搞了 \(20\) 分钟才解开,真想把绑我的人吊起来 \(xxx\) 公交车上碰到一位长者,被教育了一顿 长者: ...