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. Centos出现-bash: unzip: command not found的解决办法

    利用unzip命令解压缩的时候,出现-bash:  unzip: command not found的错误. unzip——命令没有找到,其原因肯定是没有安装unzip. 利用一句命令就可以解决了.  ...

  2. POJ 1018

    #include<iostream> #define MAXN 105 #define inf 10000000 #include<vector> #include<io ...

  3. 一文详解python的类方法,普通方法和静态方法

    首先形式上的区别,实例方法隐含的参数为类实例self,而类方法隐含的参数为类本身cls. 静态方法无隐含参数,主要为了类实例也可以直接调用静态方法. 所以逻辑上,类方法被类调用,实例方法被实例调用,静 ...

  4. 支付宝小程序自定义弹窗插件|支付宝dialog插件|model插件

    支付宝小程序自定义弹窗组件wcPop|小程序自定义对话框|actionSheet弹窗模板 支付宝小程序官方提供的alert提示框.dialog对话框.model弹窗功能比较有限,有些都不能随意自定义修 ...

  5. C# 连接Paradox DB

    Paradox数据库是一个成名于15年前的数据库,那时候Borland公司还存在.最近客户提出需求,要在一套用了12年+的应用程序上作些功能更改.这套应用程序使用Delphi+Paradox数据库. ...

  6. (转) mysql之status和variables区别及用法详解

    原文:http://blog.csdn.net/andyzhaojianhui/article/details/50052117

  7. spring boot整合Swagger2

    Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化RESTful风格的 Web 服务.总体目标是使客户端和文件系统作为服务器以同样的速度来更新.文件的方法,参数和模型紧密集成到服务器 ...

  8. cygwin 安装.

    在线安装, http://www.cygwin.com/  64位的,下载安装. 先装的低配的,只有几个组件装了,不然全部装太大,下次需要再装... binutils gcc gdb windows ...

  9. Spring+Druid+SpringMVC的搭建(附Demo)

    最近公司事情比较少,便想利用这段空闲时间做一个自己的博客. 前端界面已经搞好,感谢杨姐的模板,自己稍微把模板没有的模块给补全了. 今天便开始自己的SSM框架搭建,数据库链接是采用数据库连接池.先上个项 ...

  10. tensorflow VocabularyProcessor

    from tensorflow.contrib import learn import numpy as np vocab_process = learn.preprocessing.Vocabula ...