使用ReactJS实现的响应式相册（画廊）

Responsive React Gallery

react, photo

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 3582
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

const {Component} = React; 
const items = [
      {name: 'Bangkok', image: '/uploads/161101/boldybae1.jpg?dl=1'},
      {name: 'Forest', image: '/uploads/161101/boldybae2.jpg?dl=1'},
      {name: 'London', image:'http://ericbrewer.ca/images/stockImages/londonStation.jpg?dl=1'},
      {name: 'River', image:'http://ericbrewer.ca/images/stockImages/mistRiver.jpg?dl=1'}
    ];

class Gallery extends Component{
  constructor(props){
    super(props);
    this.items = items;
    this.defaultCardPos = {top:'-200%', left:0}
    this.state={activeItem: false, cardTop:this.defaultCardPos.top, cardLeft:this.defaultCardPos.left, cardActive:false}
  }
  handleItemClick(name, item){
    this.setState({activeItem: name})
    let oTop = item.offsetTop,
        oLeft = item.offsetLeft;
    this.setState({cardTop:oTop, cardLeft:oLeft});
    this.cardTimeout = setTimeout(()=>{
      this.setState({cardActive: true});
    }, 100)
  }
  getBackgroundImage(itemName){
    let imageItem = this.items.reduce((ov, nv)=>{
      return nv.name == itemName ? nv : ov;
    });
    return imageItem.image;
  }
  handleCardClick(){
    if(!this.state.activeItem) return false;
    this.setState({cardActive: false, activeItem:false, cardTop:this.defaultCardPos.top, cardLeft:this.defaultCardPos.left});
  }
  renderGallery(){
    return this.items.map( item=>{
      const activeClass = this.state.cardActive ? 'active' : '';//this.state.activeItem == item.name ? 'active' : '';
      return <GalleryItem name={item.name} background={item.image} active={activeClass} clickFunction={this.handleItemClick.bind(this)}>
        <h2>{item.name}</h2>
        <div className="item-mask" />
      </GalleryItem>
    });
  }
  render(){
    const maskActive = '';//this.state.activeItem ? "active" : "";
    const galleryBackground = this.state.activeItem ? this.getBackgroundImage(this.state.activeItem) : '';
    return <div className="gallery">
      {this.renderGallery()}
      <Card title={this.state.activeItem} ref="card" top={this.state.cardTop} left={this.state.cardLeft} active={this.state.cardActive} closeFunction={this.handleCardClick.bind(this)} />
      <div className={`gallery-mask ${maskActive}`} />
      <div className={`backdrop ${this.state.activeItem ? 'active' : ''}`} style={{'backgroundImage': `url(${galleryBackground})`}} onClick={this.handleCardClick.bind(this)}/>
    </div>
  }
}

class GalleryItem extends Component{
  constructor(props){
    super(props);
    console.log(this.props.background)
  }
  handleClick(e){
    e.preventDefault();
    this.props.clickFunction(this.props.name, this.refs.el)
  }
  render(){
    const style ={'background-image': `url(${this.props.background})`};
    return <div ref="el" className={`gallery-item ${this.props.active}`} style={style} onClick={this.handleClick.bind(this)}>{this.props.children}</div>
  }
}

class Card extends Component {
  constructor(props){
    super(props)
    this.state= {transit:false}
  }
  handleClose(e){
    e.preventDefault();
    this.setState({transit:true});
    this.timeout = setTimeout(()=>{
      this.setState({transit:false})
      this.props.closeFunction();
    }, 400);
  }
  render(){
    const activeClass = this.props.active ? "active" : "";
    const transitClass = this.state.transit ? "transit" : "";
    return(
      <div className={`card ${activeClass} ${transitClass}`} style={{'left':this.props.left, 'top':this.props.top}}>
        <h2>{this.props.title}</h2>
        <a className="btn-close" onClick={this.handleClose.bind(this)}>Close x</a>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus placerat vitae mi ut lobortis. In vehicula, risus eu rhoncus ornare, augue mauris volutpat justo, ut pellentesque libero turpis quis leo. Nam id porttitor enim, eget tempor arcu. Nulla blandit accumsan tellus in tristique. Praesent pellentesque quis nisi sit amet accumsan. Cras quam dui, pulvinar eget finibus eget, tincidunt in nisl. Vestibulum vulputate fringilla odio, eu porta mi porta ut. Cras fermentum porttitor mi, vel dignissim dui egestas sed. Pellentesque sapien nunc, commodo ut libero at, molestie venenatis urna. Fusce commodo enim magna, ac efficitur arcu dictum in.</p>
      </div>
    );
  }
}

ReactDOM.render(<Gallery />, document.getElementById('portfolio'));

编译

CSS

@import "https://fonts.googleapis.com/css?family=Fira+Sans:300,400";
body,
html {
    display: block;
    height: 100%;
    width: 100%;
}
body {
    background: #f4f4f4;
    background: linear-gradient(0deg, #eae4e4, #f4f4f4);
    font-family: "Fira Sans", helvetica, arial, sans-serif;
}
#portfolio {
    display: block;
    padding: 10px;
    width: 100%;
    height: 100%;
}
.gallery {
    display: flex;
    justify-content: space-between;
    flex-flow: row wrap;
    width: 100%;
}
.gallery .gallery-mask {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1;
    transition: all .2s ease-out;
    opacity: 0;
    display: none;
}
.gallery .gallery-mask.active {
    display: block;
    transition: all .6s ease-out;
    opacity: 1;
}
.gallery-item {
    display: flex;
    position: relative;
    width: 30%;
    height: 200px;
    background-color: white;
    margin-bottom: 20px;
    align-items: center;
    justify-content: center;
    background: white no-repeat center center;
    background-size: cover;
    box-shadow: 3px 5px 15px -3px rgba(0, 0, 0, 0.3);
    transition: all .4s ease-out;
    overflow: hidden;
    z-index: 5;
}
.gallery-item h2 {
    color: white;
    font-weight: 300;
    text-transform: uppercase;
    z-index: 2;
}
.gallery-item .item-mask {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1;
    transition: all .2s ease-out;
}
.gallery-item:hover {
    transform: scale(1.05);
}
.gallery-item:hover .item-mask {
    opacity: 0;
}
.gallery-item.active {
    opacity: 0;
    transform: scale(0.4);
}
@media (max-width: 760px) {
    .gallery-item {
        width: 48%;
    }
}
.card {
    display: block;
    position: absolute;
    top: -200%;
    left: 0;
    width: 30%;
    height: 200px;
    padding: 50px;
    background: white;
    overflow: hidden;
    z-index: 200;
    box-shadow: 5px 7px 20px -5px rgba(0, 0, 0, 0.3);
}
@media (max-width: 760px) {
    .card {
        width: 48%;
    }
}
.card .btn-close {
    display: block;
    position: absolute;
    top: 30px;
    right: 30px;
}
.card h1,
.card p {
    width: 500px;
    transition: all .4s linear;
}
.card.active {
    top: 50% !important;
    left: 50% !important;
    width: 600px;
    height: 80%;
    transform: translate(-50%, -50%);
    transition: all .4s ease-in;
}
.card.active h1,
.card.active p {
    width: 500px;
}
@media (max-width: 760px) {
    .card.active {
        width: 320px;
        padding: 50px 30px;
    }
    .card.active h1,
    .card.active p {
        width: 260px;
    }
}
.card.transit {
    transform: translate(-50%, -100%);
    opacity: 0;
}
.backdrop {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: transparent no-repeat center center;
    background-size: cover;
    opacity: 0;
    z-index: 1;
    transition: opacity .6s ease-in;
}
.backdrop.active {
    opacity: 1;
}

HTML

Responsive React Gallery

react, photo

编辑器支持Emmet

快捷键

Responsive React Gallery

react, photo

使用ReactJS实现简单的交互式卡通动画

使用ReactJS和D3实现的圆点分布图（散点图）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：