app.js

import React from 'react'
import icon from "../src/icon/国旗.webp"
import icon1 from "../src/icon/勿忘国耻.webp"
import icon2 from "../src/icon/国旗.webp"
import icon3 from "../src/icon/天安门.webp"
import Draggable from 'react-draggable';
export default function ZhiDing() {
  return (
    <div>
      <div style={{ position: 'fixed', top: '0', width: '100%' }}>
        < img src={icon} alt="" style={{ width: '500px', height: 'auto'}} />

      </div>
      < img src={icon1} alt="" style={{ width: '500px', height: 'auto' }} />
      < img src={icon} alt="" style={{ width: '500px', height: 'auto' }} />
      < img src={icon1} alt="" style={{ width: '500px', height: 'auto' }} />
      < img src={icon2} alt="" style={{ width: '500px', height: 'auto' }} />
      < img src={icon3} alt="" style={{ width: '500px', height: 'auto' }} />
      < img src={icon} alt="" style={{ width: '500px', height: 'auto' }} />
      < img src={icon1} alt="" style={{ width: '500px', height: 'auto' }} />
      <Draggable bounds={{ right: 1500, left: 0, top: 0, bottom: 500 }} >
        < img src={icon} alt="" style={{ width: '100%', height: 'auto' }} />
        {/* < img src={icon1} alt="" style={{ width: '100%', height: 'auto' }} />
        < img src={icon2} alt="" style={{ width: '100%', height: 'auto' }} />
        < img src={icon3} alt="" style={{ width: '100%', height: 'auto' }} /> */}
      </Draggable>
    </div>
  )
}

// import React, { Component } from 'react'
// import icon from "../src/icon/壁纸.jpg"
// export default class App extends Component {
//   render() {
//     return (
//       <div className="rr">
//       <div>
//         {/* 瀑布流 */}
//         <img src={icon} style={{display:"inline-block", width:"350px",height:"350px"}}/>
//         <img src={icon} style={{display:"inline-block", width:"350px",height:"350px"}}/>
//         <img src={icon} style={{display:"inline-block", width:"350px",height:"350px"}}/>
//         <img src={icon} style={{display:"inline-block", width:"350px",height:"350px"}}/>
//         <img src={icon} style={{display:"inline-block", width:"350px",height:"350px"}}/>
//         <img src={icon} style={{display:"inline-block", width:"350px",height:"350px"}}/>
//         <img src={icon} style={{display:"inline-block", width:"350px",height:"350px"}}/>
//         <img src={icon} style={{display:"inline-block", width:"350px",height:"350px"}}/>
//         <img src={icon} style={{display:"inline-block", width:"350px",height:"350px"}}/>
//         <img src={icon} style={{display:"inline-block", width:"350px",height:"350px"}}/>
//         <img src={icon} style={{display:"inline-block", width:"350px",height:"350px"}}/>
//         <img src={icon} style={{display:"inline-block", width:"350px",height:"350px"}}/>
//         <img src={icon} style={{display:"inline-block", width:"350px",height:"350px"}}/>
//         <img src={icon} style={{display:"inline-block", width:"350px",height:"350px"}}/>
//         <img src={icon} style={{display:"inline-block", width:"350px",height:"350px"}}/>
//         <img src={icon} style={{display:"inline-block", width:"350px",height:"350px"}}/>
//       </div>  
//     </div>
//     )
//   }
// }

app.css

*{
  margin: 0;
  padding: 0;
}
div{
  width: 150px;
  position: absolute;
  border: 1px solid;
}
img{
  display: inline-block;
  width: 150px;
}
#wrap{
  position: relative;
  width: 100%;
}