js瀑布流代码

最新推荐文章于 2023-11-25 13:32:48 发布

FGenius

最新推荐文章于 2023-11-25 13:32:48 发布

阅读量162

点赞数

本文链接：https://blog.csdn.net/FGenius/article/details/106135149

版权

这是一个关于如何使用HTML、CSS和JavaScript实现瀑布流布局的示例代码。通过设置CSS弹性布局，JavaScript动态加载图片并调整布局，实现了网页中图片的瀑布流展示效果，当用户滚动页面时，会自动加载更多图片。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>waterfall</title>
   </head>
   <style type="text/css">
       body{
           background-color: #dedede;
           margin: 0;
           padding: 0;
       }
       .waterfall_container{
           width: 60%;
           height: 500px;
           margin: 0 auto;
           /* 弹性布局 */
           display: flex;
           /* 方向:横向 */
           flex-direction: row;
       }
       .waterfall_container .item{
           /*弹性项的占比*/
           flex: 1;
           margin: 17px;

       }
       .waterfall_container .item img{
           width: 100%;
           border: 10px

最低0.47元/天解锁文章

FGenius

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js瀑布流代码

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>waterfall</title> </head> <style type="text/css"> body{ background-color: #dedede; margi...
复制链接

扫一扫