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 (<divkey={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 (<divkey={index}className={`travel_div animate__animated ${item.classname}`}><img src={item.imgsrc} alt="" /></div>);})}</main><Footer></Footer></>);
};
export default Travel;

ReactHooks——制作一个简单的瀑布流(css)相关推荐

java瀑布流_一个简单的瀑布流实现。
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,博客地址为http://www.cnblogs.com/jasonnode/ . 瀑布流简介主 ...
瀑布流式页面布局_微信小程序——实现简单的瀑布流式布局
写页面时,考虑到美观,良好的用户体验,对于内容的展示我们经常会用到瀑布流式布局,那么如何实现一个简单的瀑布流呢? 瀑布流式布局原理:遍历数组判断奇偶性,然后分左右排布,左右两边代码基本一致直接上代 ...
【meng_项目】python+flask+html+css制作一个简单的生日祝福语网页
python+flask+html+css制作一个简单的生日祝福语网页一个py文件: test.py 一个html文件: birthday_index.html 一张图片: ...
使用Dreamweaver/利用HTML5/CSS/制作一个简单的文字logo
一.制作一个简单的logo 1. 结构与样式分析首先我们根据logo的图片分析logo的效果,该logo由6个字母组成.在使用"数码测色计"测出logo的颜色,这里我们测出log ...
利用JS实现简单的瀑布流效果
转载:https://www.cnblogs.com/dyx-wx/p/4642637.html 一.瀑布流之准备工作首先声明下, 为了方便演示和联系, 我使用的是本地图片, 如果大家有需要的话 ...
实例学习SSIS（一）--制作一个简单的ETL包
http://www.cnblogs.com/tenghoo/archive/2009/10/archive/2009/10/archive/2009/10/16/ssis_lookup.html 导 ...
制作一个简单的轮播图（详解新手教学）
制作一个简单的轮播图(详解新手教学) 相信很多初学者,无论是前端还是后端,对于制作页面时,都想自己亲手制作一个轮播图. 如何制作一个轮播图: 基础知识:有HTML,Css,js基础本文使用技术: H ...
程序员过中秋丨用代码制作一个祝福小网页(html+css)
大家好,我是陈橘又青,兰经香风满,松窗夜月圆!都说我们程序员过节最没仪式感,再过两周就是中秋节了,今天我们就来制作一个简单的中秋祝福小网页,祝愿看到的所有人好运安康!(附上完整源码,需要的小伙伴自取即 ...
用计算机怎么做成绩表,利用Excel制作一个简单的学生成绩表.doc
利用Excel制作一个简单的学生成绩表教学设计表学科信息技术授课年级八年级学校教师姓名章节名称初中信息技术八年级上册第7课(第1节)计划学时1学时学习内容分析学习Excel的基础知识, ...

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

瀑布流

数据

JS

css

全部代码

ReactHooks——制作一个简单的瀑布流(css)相关推荐

最新文章

热门文章