Question

我一直在开发照片库应用程序，并使用HTML和CSS设置了基本结构。 我使用React渲染照片，现在我想为每张照片添加模式。本质上，我想将其制作成旋转木马，但在如何处理它方面我感到困惑。

我必须在哪个文件上编写代码？

这是当前结构：

这是我的HTML：

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div id="photos">
    Hello World
  </div>
  <script type="text/javascript" src="bundle.js"></script>
</body>
</html>

这是我的styles.css：

#photos-gallery {
  height: 275px;
  width: 634px;
}

.photos-gallery-header {
  border-bottom: 1px solid #e1e1e1;
  color: #333;
  display: flex;
  font-size: 24px;
  font-weight: bold;
  justify-content: space-between;
  line-height: 32px;
  margin: 0 0 16px;
  padding-bottom: 16px;
}

.photos-gallery-content {
  display: grid;
  grid-template-columns: 20% 50% 15% 15%;
  grid-column-gap: 0;
  grid-row-gap: 0;
  height: 200px;
}   

.photos-gallery-content .item {
  box-shadow: inset 0 0 0 1px #000;
  overflow: hidden;
}

.photos-gallery-content .item-1 {
  grid-column-start: 1;
  grid-column-end: 1;
  grid-row-start: 1;
  grid-row-end: 1;
}

.photos-gallery-content .item-2 {
  grid-column-start: 1;
  grid-column-end: 1;
  grid-row-start: 2;
  grid-row-end: span 2;
}

.photos-gallery-content .item-3 {
  grid-column-start: 2;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: span 3;
}

这是我的index.jsx：

import App from './components/App.jsx'

ReactDOM.render(<App />, document.getElementById('photos'));

这是我的App.jsx：

import React from 'react';
import PhotoList from './PhotoList.jsx';

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      photos: [
        "https://i.imgur.com/8pTwPlXb.jpg",
        "https://i.imgur.com/OPAR3PCb.jpg",
        "https://i.imgur.com/A8eQsll.jpg",
        "https://i.imgur.com/2cGhWubb.jpg",
        "https://i.imgur.com/KhYHiPYb.jpg",
        "https://i.imgur.com/1KSodpOb.jpg",
        "https://i.imgur.com/WdlOxaxb.jpg",
        "https://i.imgur.com/ZtHebw9b.jpg",
        "https://i.imgur.com/oqJCGvTb.jpg"

      ]
    }
  }
  render() {
    return (
      <div className="photos-gallery">
        <h2 className="photos-gallery-header"> 9 Photos </h2>
        <PhotoList photos={this.state.photos} />
      </div>
    )
  }
}

export default App;

这是我的PhotoList.jsx：

import React from 'react';
import PhotoItem from './PhotoItem.jsx';

var PhotoList = (props) => {
  return (
    <div className="photos-gallery-content">
      {props.photos.map(photo => 
        <PhotoItem key={props.photos.indexOf(photo)} photo={photo} />
      )}
    </div>
  )
}
export default PhotoList;

这是我的PhotoItem.jsx：

import React from 'react';

const PhotoItem = ({photo}) => {
  return (
    <div className={`item item-${index}`}>
      <div className='photo'>
        <img src={photo} />
      </div>
    </div>
  )
};
export default PhotoItem;

如何为网格图像制作照片模态

0 个答案: