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. Python小白学习之路（六）—— 【元祖】【元祖相关功能】

    元祖 tu = (111,'alex',(11,['aa','xhg',(78,43)],'aaa'),789,) 通过这个例子,我们看到元祖的特征: 是通过括号()括起来的 一般写元祖的时候,推荐子 ...

  2. 认识AngularJS

    学习AngularJS所需技能 HTML & CSS JavaScript 为什么要使用AngularJS 如果你想用JavaScript制作动态Web站点,使用AngularJS有以下优点: ...

  3. (转)Jupyter notebook入门教程（上,下）

    https://blog.csdn.net/red_stone1/article/details/72858962------上 https://blog.csdn.net/red_stone1/ar ...

  4. python中的sort方法

    Python中的sort()方法用于数组排序,本文以实例形式对此加以详细说明: 一.基本形式 列表有自己的sort方法,其对列表进行原址排序,既然是原址排序,那显然元组不可能拥有这种方法,因为元组是不 ...

  5. 模拟登陆+数据爬取 (python+selenuim)

    以下代码是用来爬取LinkedIn网站一些学者的经历的,仅供参考,注意:不要一次性大量爬取会被封号,不要问我为什么知道 #-*- coding:utf-8 -*- from selenium impo ...

  6. SPSS学习系列之SPSS Modeler怎么修改默认的内存大小（图文详解）

    不多说,直接上干货! 问题来源: 如果你的电脑内存配置比较低的话,会随着数据量增加(尤其是大数据),带不起的情况很有可能发生,会出现一些内存报错... ... 解决办法: 打开“工具”,在modele ...

  7. wordpress 后台404解决办法

    1.vim /usr/local/nginx/conf/wordpress.conf2.rewrite /wp-admin$ $scheme://$host$uri/ permanent;3.ngni ...

  8. tomcat启动(Ⅶ)请求处理--Processor.process(SocketWrapper<S> socketWrapper)

    tomcat启动(六)Catalina分析-StandardServer.start() 上一篇分析到:Http11NioProcessor.process(SocketWrapper<S> ...

  9. 利用ggplot2画出各种漂亮图片详细教程

    1.Why use ggplot2 ggplot2是我见过最human friendly的画图软件,这得益于Leland Wilkinson在他的著作<The Grammar of Graphi ...

  10. 本地开启https的nginx配置

    下载证书和key放置在nginx配置文件同级目录下,然后添加配置内容,监听443端口,如果本地443端口被占用,可以使用其他端口测试. server { listen 443; server_name ...