实现瀑布流布局效果两种方式

最新推荐文章于 2024-06-28 14:13:55 发布

丶阿喜z

最新推荐文章于 2024-06-28 14:13:55 发布

阅读量2.8k

点赞数

分类专栏：编程开发 Front 文章标签： javascript 瀑布布局 html css

本文链接：https://blog.csdn.net/wuya814070935/article/details/48136625

版权

该博客探讨了如何使用原生JavaScript和JQuery来实现瀑布流布局，包括具体的实现步骤和运行效果展示。

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

使用原生JavaScript实现瀑布流

// index.html

<!DOCTYPE html>
<html>
<head>
    <title>瀑布流布局</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <script type="text/javascript" src="js/script.js"></script>
</head>
<body>
    <div id="main">
        <div class="box">
            <div class="pic">
                <img src="images/0.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="images/1.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="images/2.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="images/3.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="images/4.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="images/5.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="images/6.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="images/7.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="images/8.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="images/9.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="images/10.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="images/0.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="images/1.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="images/2.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="images/3.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="images/4.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="images/5.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="images/6.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="images/7.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="images/8.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="images/9.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="images/10.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="images/0.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="images/1.jpg" />
            </div>

最低0.47元/天解锁文章

丶阿喜z

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
实现瀑布流布局效果两种方式

使用原生JavaScript实现瀑布流// index.html<!DOCTYPE html><html><head> <title>瀑布流布局</title> <meta charset="utf-8" /> <link rel="stylesheet" type="text/css" href="css/style.css" /> <script type="
复制链接

扫一扫

专栏目录