js特效——>瀑布流特效

最新推荐文章于 2024-05-11 13:22:11 发布

微笑吃橘子

最新推荐文章于 2024-05-11 13:22:11 发布

阅读量452

点赞数

分类专栏： js特效

本文链接：https://blog.csdn.net/qq316895454/article/details/45499159

版权

本文介绍了如何使用JavaScript创建一个瀑布流布局。通过HTML结构、CSS样式以及JavaScript逻辑，实现了一个动态调整列宽，使得内容块可以像瀑布一样整齐排列的效果。

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

HTMl源码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/mycss.css"/>
    <script type="text/javascript" src="js/myjs.js"></script>
    <title>瀑布流演示</title>
</head>
<body>
    <div id="content">
        <div class="box">
            <div class="box_img">
                <img src="img/1.jpg"/>
            </div>
        </div>

        <div class="box">
            <div class="box_img">
                <img src="img/2.jpg"/>
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="img/3.jpg"/>
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="img/4.jpg"/>
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="img/5.jpg"/>
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="img/6.jpg"/>
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="img/7.jpg"/>
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="img/8.jpg"/>
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="img/9.jpg"/>
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="img/10.jpg"/>
            </div>
        </div>
        <div class="box">
            <

最低0.47元/天解锁文章

微笑吃橘子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
js特效——>瀑布流特效

HTMl源码html>html>head lang="en"> meta charset="UTF-8"> link rel="stylesheet" type="text/css" href="css/mycss.css"/> script type="text/javascript" src="js/myjs.js">script> title>瀑布
复制链接

扫一扫

专栏目录