当前位置：网站首页>实现瀑布流效果
实现瀑布流效果
2022-07-28 19:40:00 【龙雨LongYu12】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.main_cell{
columns: 5;
width: 1100px;
position: relative;
left: 50%;
margin-left: -550px;
column-gap: 5px;
}
.img_cell,.img_item{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="main_cell">
<div class="img_cell">
<img class="img_item" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic16.nipic.com%2F20111008%2F5203963_093910733000_2.jpg&refer=http%3A%2F%2Fpic16.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636445490&t=38bbac8860f0dd1de7c4cb6950827213" alt="" srcset="">
</div>
<div class="img_cell">
<img class="img_item" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic14.nipic.com%2F20110527%2F7539498_003034652127_2.jpg&refer=http%3A%2F%2Fpic14.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636445490&t=accd04ebf014e1e36f75307dcbfe8fd7" alt="" srcset="">
</div>
<div class="img_cell">
<img class="img_item" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwx1.sinaimg.cn%2Fmw690%2F002UWGmply1guojkdo2myj60v912ah1602.jpg&refer=http%3A%2F%2Fwx1.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636445490&t=7cb45cb8c9b4b57cdb8cb7a7d0d9b7f4" alt="" srcset="">
</div>
<div class="img_cell">
<img class="img_item" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwx3.sinaimg.cn%2Fmw690%2F002UWGmply1guojkec979j60v9120q8o02.jpg&refer=http%3A%2F%2Fwx3.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636445490&t=bc4820183643b3a96b48da58265b7259" alt="" srcset="">
</div>
<div class="img_cell">
<img class="img_item" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fww4.sinaimg.cn%2Fmw690%2F002UWGmply1guojkenpgrj60v912aahq02.jpg&refer=http%3A%2F%2Fwww.sina.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636445490&t=a3683c7eacbff5880788477af17a2e8e" alt="" srcset="">
</div>
<div class="img_cell">
<img class="img_item" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic21.nipic.com%2F20120606%2F5137861_093119370162_2.jpg&refer=http%3A%2F%2Fpic21.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636445490&t=d34e366d0d95a22f80212ba0c0cbaee4" alt="" srcset="">
</div>
<div>
<img class="img_item" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fww1.sinaimg.cn%2Fmw690%2F002UWGmply1guojkaind4j60u011i79n02.jpg&refer=http%3A%2F%2Fwww.sina.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636445490&t=5f4429b18cb6c3c9f642f2dead395e45" alt="" srcset="">
</div>
<div class="img_cell">
<img class="img_item" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F14049074344%2F641&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636445490&t=2449df9759c0b2e34b4ecc729d38f3aa" alt="" srcset="">
</div>
<div class="img_cell">
<img class="img_item" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic13.nipic.com%2F20110324%2F6999402_050849259122_2.jpg&refer=http%3A%2F%2Fpic13.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636445490&t=18234e60e4e0ee51dcf4a4c217b99b41" alt="" srcset="">
</div>
<div class="img_cell">
<img class="img_item" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic13.nipic.com%2F20110324%2F6999402_050849259122_2.jpg&refer=http%3A%2F%2Fpic13.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636445490&t=18234e60e4e0ee51dcf4a4c217b99b41" alt="" srcset="">
</div>
<div class="img_cell">
<img class="img_item" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic13.nipic.com%2F20110324%2F6999402_050849259122_2.jpg&refer=http%3A%2F%2Fpic13.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636445490&t=18234e60e4e0ee51dcf4a4c217b99b41" alt="" srcset="">
</div>
<div class="img_cell">
<img class="img_item" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic13.nipic.com%2F20110324%2F6999402_050849259122_2.jpg&refer=http%3A%2F%2Fpic13.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636445490&t=18234e60e4e0ee51dcf4a4c217b99b41" alt="" srcset="">
</div>
<div class="img_cell">
<img class="img_item" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwx1.sinaimg.cn%2Fmw690%2F002UWGmply1guojkdo2myj60v912ah1602.jpg&refer=http%3A%2F%2Fwx1.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636445490&t=7cb45cb8c9b4b57cdb8cb7a7d0d9b7f4" alt="" srcset="">
</div>
<div class="img_cell">
<img class="img_item" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwx3.sinaimg.cn%2Fmw690%2F002UWGmply1guojkec979j60v9120q8o02.jpg&refer=http%3A%2F%2Fwx3.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636445490&t=bc4820183643b3a96b48da58265b7259" alt="" srcset="">
</div>
<div class="img_cell">
<img class="img_item" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fww4.sinaimg.cn%2Fmw690%2F002UWGmply1guojkenpgrj60v912aahq02.jpg&refer=http%3A%2F%2Fwww.sina.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636445490&t=a3683c7eacbff5880788477af17a2e8e" alt="" srcset="">
</div>
<div class="img_cell">
<img class="img_item" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic13.nipic.com%2F20110324%2F6999402_050849259122_2.jpg&refer=http%3A%2F%2Fpic13.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636445490&t=18234e60e4e0ee51dcf4a4c217b99b41" alt="" srcset="">
</div>
<div class="img_cell">
<img class="img_item" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic13.nipic.com%2F20110324%2F6999402_050849259122_2.jpg&refer=http%3A%2F%2Fpic13.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636445490&t=18234e60e4e0ee51dcf4a4c217b99b41" alt="" srcset="">
</div>
</div>
</body>
</html>
边栏推荐
- SQL server中提示对象名无效
- quii cordova-plugin-telerik-imagepicker插件多图上传乱序
- Basic operations of unity3d scene production
- C language final review questions
- Maintenance of delta hot metal detector principle analysis of v5g-jc-r1 laser measurement sensor / detector
- SQL Server 数据库之备份和恢复数据库
- Unity knowledge points summary (1)
- Confession of a graduate student: why am I addicted to opengauss community?
- Invalid prompt object name in SQL Server
- The development of smart home industry pays close attention to edge computing and applet container technology
猜你喜欢
Two excellent software of my love cracking, batch search text, image and video image quality enhancement
Ctfshow network lost track record (2)
职场高薪 |「中高级测试」面试题
The EMC vnx5200 fault light is on, but there is no hardware fault prompt
Moco V3: visual self supervision ushers in transformer
Jiuxin intelligence officially joined opengauss community
属性基加密仿真及代码实现（CP-ABE）论文：Ciphertext-Policy Attribute-Based Encryption
Nacos principle
(turn) bubble sorting and optimization details
Basic operations of unity3d scene production
随机推荐
Moco V3: visual self supervision ushers in transformer
4.1 Member的各种调用方式
Study and use of cobalt strike
Maintenance of delta hot metal detector principle analysis of v5g-jc-r1 laser measurement sensor / detector
【TiDB】txt文档导入数据库,这样做真的很高效
58岁安徽人，干出瑞士今年最大IPO 投资界
到底为什么不建议使用SELECT * ？
unity-shader-1
Buuctf questions upload labs record pass-01~pass-10
Unity3d tutorial notes - unity initial 02
Nacos principle
Study - Summary of geometric calculations
怎么理解数据网格（Data Mesh）
在子组件中使用el-date-picker报错
1945. 字符串转化后的各位数字之和
The 35 required questions in MySQL interview are illustrated, which is too easy to understand
ctfshow 网络迷踪做题记录（1）
[cloud native] what is ci/cd| Ci/cd to smooth delivery obstacles
There have been two safety accidents in a month after listing. Is L9 ideal?
Backup and recovery of SQL Server database