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. 解决org.hibernate.QueryException illegal attempt to dereference collection 异常错误

    今天做项目的时候,有两个实体:款式.品牌两者关系是多对多的关联关系,实现的功能是:通过选择款式,显示出该款式的所有品牌.HQL语句如下: 运行时出现这个异常错误:org.hibernate.Query ...

  2. servlet中request和response

    一.HttpServletRequest介绍 HttpServletRequest对象代表客户端的请求,当客户端通过HTTP协议访问服务器时,HTTP请求头中的所有信息都封装在这个对象中,通过这个对象 ...

  3. Swift 学习指引

    以下指引是基于最新的 Swift 4.0 为基础为而言. 如你在参考3.0以下版本, 那你就不要说你会 Swift, 3.0 之前是 Objective-C 的搬迁(80%),是不成熟的语言, 看着很 ...

  4. 微信小程序web-view(webview) 嵌套H5页面 唤起微信支付的实现方案

    场景:小程序页面有一个web-view组件,组件嵌套的H5页面,要唤起微信支付. 先讲一下我的项目,首先我是自己开发的一个H5触屏版的商城系统,里面含有购物车,订单支付等功能.然后刚开始,我们公众号里 ...

  5. Spring Security构建Rest服务-0300-Restful API异常处理

    SpringBoot默认的错误处理机制: 一.测试需要的部分代码 (完整代码放在了github https://github.com/lhy1234/spring-security): UserCon ...

  6. [转] 使用 MVC 5 的 EF6 Code First 入门 系列

    译文:http://www.cnblogs.com/Bce-/category/573301.html 原文:http://www.asp.net/mvc/overview/getting-start ...

  7. android studio 3.1.4下载安装配置（附旧版本下载地址）

    windows下安装android studio.当前时间2018年9月. 最新版本的android studio3.2.0-release出来了,拥有许多新的特性 可能我是一个业余的android开 ...

  8. tensorflow语法笔记

    1.如何理解 tf.reduce_max或者 tf.reduce_mean中对Tensor和高维矩阵的坐标轴axis的选择的操作 tf.reduce_mean( input_tensor, axis= ...

  9. [转] Ubuntu 14.04/14.10下安装VMware Workstation 11图文教程

    点击这里查看原文 译者:GuiltyMan 本文由 Linux公社翻译组 原创翻译  Linux公社 诚意奉献 更多请访问此处博客网站 VMware workstation 是一个可以进行桌面操作的虚 ...

  10. Linux-(kill,wc,killall,ln,cal,date)

    kill命令 1．命令格式: kill [参数] [进程号] 2．命令功能: 发送指定的信号到相应进程.不指定型号将发送SIGTERM(15)终止指定进程.如果仍无法终止该程序可用“-KILL” 参数 ...