ReactHooks——制作一个简单的瀑布流(css)

瀑布流

数据

export const TRAVEL_DATA = [
  {
    classname:"animate__bounceInLeft",
    imgsrc: img1,
  },
  {
    classname:"animate__bounceInRight",
    imgsrc: img2,
  },
  {
    classname:"animate__bounceInUp",
    imgsrc: img3,
  },
  {
    classname:"animate__fadeIn",
    imgsrc: img4,
  },
  {
    classname:"animate__fadeInDown",
    imgsrc: img5,
  },
  {
    classname:"animate__fadeInDownBig",
    imgsrc: img6,
  },
  {
    classname:"animate__fadeInLeft",
    imgsrc: img7,
  },
  {
    classname:"animate__fadeInLeftBig",
    imgsrc: img8,
  },
  {
    classname:"animate__fadeInRight",
    imgsrc: img9,
  },
  {
    classname:"animate__fadeInRightBig",
    imgsrc: img10,
  },
  {
    classname:"animate__fadeInUp",
    imgsrc: img11,
  },
  {
    classname:"animate__fadeInUpBig",
    imgsrc: img12,
  },
  {
    classname:"animate__fadeInTopLeft",
    imgsrc: img13,
  },
  {
    classname:"animate__fadeInTopRight",
    imgsrc: img14,
  },
  {
    classname:"animate__fadeInBottomLeft",
    imgsrc: img15,
  },
  {
    classname:"animate__fadeInBottomRight",
    imgsrc: img16,
  },
  {
    classname:"animate__flip",
    imgsrc: img17,
  },
  {
    classname:"animate__flipInX",
    imgsrc: img18,
  },
  {
    classname:"animate__flipInY",
    imgsrc: img19,
  },
  {
    classname:"animate__lightSpeedInRight",
    imgsrc: img20,
  },
  {
    classname:"animate__lightSpeedInLeft",
    imgsrc: img21,
  },
  {
    classname:"animate__rotateIn",
    imgsrc: img22,
  },
  {
    classname:"animate__rotateInDownLeft",
    imgsrc: img23,
  },
  {
    classname:"animate__rotateInDownRight",
    imgsrc: img24,
  },
  {
    classname:"animate__rotateInUpLeft",
    imgsrc: img25,
  },
  {
    classname:"animate__rotateInUpRight",
    imgsrc: img26,
  },
  {
    classname:"animate__rotateInUpRight",
    imgsrc: img27,
  },
  {
    classname:"animate__rollIn",
    imgsrc: img28,
  },
  {
    classname:"animate__zoomIn",
    imgsrc: img29,
  },
  {
    classname:"animate__zoomInDown",
    imgsrc: img30,
  },
  {
    classname:"animate__zoomInLeft",
    imgsrc: img31,
  },
  {
    classname:"animate__zoomInLeft",
    imgsrc: img32,
  },
  {
    classname:"animate__zoomInLeft",
    imgsrc: img33,
  },
  {
    classname:"animate__slideInDown",
    imgsrc: img34,
  },
  {
    classname:"animate__slideInLeft",
    imgsrc: img35,
  },
  {
    classname:"animate__slideInRight",
    imgsrc: img36,
  },
  {
    classname:"animate__slideInUp",
    imgsrc: img37,
  },
  {
    classname:"animate__bounce",
    imgsrc: img38,
  },
  {
    classname:"animate__pulse",
    imgsrc: img39,
  },
];

JS

 <main>
        {TRAVEL_DATA.map((item, index) => {
          return (
            <div
              key={index}
              className={`travel_div animate__animated ${item.classname}`}
            >
              <img src={item.imgsrc} alt="" />
            </div>
          );
        })}
      </main>

css

main{
    -moz-column-count:2;
    -webkit-column-count:2;
    column-count:5;
    -moz-column-gap:0;
    -webkit-column-gap:0;
    padding-top: 0.5em;
    .travel_div{
        -moz-page-break-inside: avoid;
        -webkit-column-break-inside: avoid;
        break-inside: avoid;
        margin: 0 10px 10px;
        overflow: hidden;
        img{
            border-radius: 10px;
            width: 100%;
            transition:all 1s ease-out;
            &:hover{
                transform:scale(1.3);
            }
        }
    }
}

全部代码

import Header from "../../components/header/index";
import Footer from "../../components/footer/index";
import { TRAVEL_DATA } from "./js/data";
const Travel = () => {
  return (
    <>
      <Header headeractive={3}></Header>
      <main>
        {TRAVEL_DATA.map((item, index) => {
          return (
            <div
              key={index}
              className={`travel_div animate__animated ${item.classname}`}
            >
              <img src={item.imgsrc} alt="" />
            </div>
          );
        })}
      </main>
      <Footer></Footer>
    </>
  );
};
export default Travel;