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. Fast Newman-FN算法以及模块度定义介绍

    一.社区的定义 Newman第一次提出模块度定义就是在2004年发表的这篇文章“fast algorithm for community structure in networks”,第一次用量化的公 ...

  2. Mac下使用zsh不执行/etc/profile文件

    Mac下使用了zsh会不执行/etc/profile文件,当然,如果用原始的是会执行. 转而执行的是这两个文件,每次登陆都会执行: ~/.zshrc与/etc/zshenv与/etc/zshrc 所以 ...

  3. (转)MySQL 常用数据存储引擎区别

    MySQL 常用数据存储引擎区别 原文:https://laravel-china.org/articles/4198/mysql-common-data-storage-engine mysql有多 ...

  4. 解决waveInOpen录音编译x64程序出错的问题

    1.之前也碰到过x86程序升级为x64程序,关键点是类型大小的使用. 之前同事碰到过一个用int表示指针的程序,程序改为x64会出错,找原因找了半天. 2.今天我也碰到了,使用aveInOpen录音, ...

  5. Exception message: /bin/bash: line 0: fg: no job control

    这个错误是 我本地idea 远程调试hadoop集群出现的 Diagnostics: Exception from container-launch. Container id: container_ ...

  6. [webpack]path、publicPath、--content-base 理解

    附源码:http://files.cnblogs.com/files/chenshao/startPublic.rar 'use strict'; var webpack = require('web ...

  7. web测试总结—用户体验

    一.什么是用户体验 用户体验,英文叫做user experience,缩写为UE,或者UX.一个较常见的定义是“指用户访问一个网站或者使用一个产品时的全部体验.他们的印象和感觉,是否成功,是否享受,是 ...

  8. Web服务端性能提升实践

    随着互联网的不断发展,日常生活中越来越多的需求通过网络来实现,从衣食住行到金融教育,从口袋到身份,人们无时无刻不依赖着网络,而且越来越多的人通过网络来完成自己的需求. 作为直接面对来自客户请求的Web ...

  9. 忽略“Signal: SIGSEGV (Segmentation fault)”

    1. touch ~/.gdbinit 2. 在.gdbinit文件中添加“handle SIGSEGV nostop noprint pass”

  10. 自动换行的两种代码(C#)

    最近有个需求,需要将C# winform中的listBox中的内容自动换行, 其实在用listBox前,已经用textBox实现了大部分功能,可惜最后还是有个焦点的问题, 就是textBox中的文字会 ...