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. jvm内存结构（二）（栈的变化，机器指令的格式/执行模式）

    栈的结构: <Java虚拟机原理图解>4.JVM机器指令集 局部变量表: 方法执行时,虚拟机会把字节码中方法数据区的code类型的属性中的局部变量放到栈的局部变量表中. 操作栈: jvm指 ...

  2. 【wepy实战】wepy搭建完整项目

    使用小程序框架wepy,搭建完整实战项目.文章将从项目结构.配置.模块等进行逐步分析和学习. 文章适合小程序开发新手以及有经验的小程序developer,不喜勿喷,不吝赐教! 本文为作者原创,转发请标 ...

  3. 前端 day 30 html 基础一

    前情提要: html基础一 一:html标签入门 1: 1 HTML结构 1)一个html文件有且只有一个html标签.这个就是HTML的根标签.2)一个HTML文件主要由两部分组成:文件头和文件体. ...

  4. 手机端API接口验证及参数签名验证

    问题背景: 后端服务对手机APP端开放API,没有基本的校验就是裸奔,别人抓取接口后容易恶意请求,不要求严格的做的安全,但是简单的基础安全屏障是要建立的,再配合HTTPS使用,这样使后端服务尽可能的安 ...

  5. 【xsy1504】 pitcure 树状数组

    数据范围:$n≤2\times 10^5$ 以下是题解: #include<bits/stdc++.h> #define L unsigned int #define MOD 167772 ...

  6. 【BZOJ1859】【ZJOI2006】碗的叠放

    题目大意:给你n个碗,求如何堆叠,使得它们的总高度最低. 首先,我们枚举碗的叠放顺序. 假设我们已经堆好了前i个碗,那么在堆第i+1个碗时,我们要将第i+1个碗与前i个碗比较,确定第i+1个碗的离地高 ...

  7. WebDriverAPI（9）

    操作JavaScript的Alert窗口 测试网址代码 <html> <head> <title>你喜欢的水果</title> </head> ...

  8. LeetCode题解-23 合并K个排序链表 Hard

    合并 k 个排序链表,返回合并后的排序链表.请分析和描述算法的复杂度. 示例: 输入: [ 1->4->5, 1->3->4, 2->6 ] 输出: 1->1-&g ...

  9. 解决ssh/scp报错：Someone could be eavesdropping on you right now (man-in-the-middle attack)!

    主要现象:ssh/scp 失败,host key verification failed. # scp /home/iso/********.iso root@192.168.1.***:/home/ ...

  10. springboot打包成jar包后找不到xml,找不到主类的解决方法

    springboot打包成jar包后找不到xml,找不到主类的解决方法 请首先保证你的项目能正常运行(即不打包的时候运行无误),我们在打包时经常遇到如下问题: springboot打包成jar包后找不 ...