HTML（5）、CSS（3）、JS的一些小案例（放大镜和瀑布流）

qd_yang_

墨衍会员 · AI 创作全网分发码龄5年

关注

原创最新推荐文章于 2025-06-19 16:33:09 发布 2.1k 阅读 AI 写同款· GEO 优化 ›

html5实现瀑布流效果阅读详情

【入门级别】案例：HTML5、 CSS3 JS （jQuery）实现布局常用瀑布流（两栏，三栏自适应）和类京东放大镜功能。

有需要欢迎大家下载源码观看~下载链接

三连关注后私信也可以拿源码哦~

移步【进阶】案例：飞翔的小鸟游戏（可以记录最高分和难度选择）

实现效果

放大镜鼠标移入自动放大，有边界越界处理不会超出指定图片，鼠标移出取消放大

瀑布流浏览器大小改变，二三栏自适应。

效果图

代码展示

//放大镜
     #small {
            width: 250px;
            height: 250px;
            border: 2px solid black;
            position: relative;
        }

        #small img {
            width: 100%;
        }

        #bigger {
            margin-left: 20px;
            width: 500px;
            height: 500px;
            border: 2px solid black;
            position: relative;
            overflow: hidden;
            display: none;
        }

        #bigger img {
            position: absolute;
        }

        #box div {
            float: left;
        }

        span {
            /* span宽/小div宽=大div宽/大图宽 */
            /* span宽 = 600/800 * 300 */
            width: 156.25px;
            height: 156.25px;
            background-color: blueviolet;
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0.3;
            display: none;
        }


 <script type="text/javascript">
        $("#small").hover(function () {
            $("span").show();
            $("#bigger").show();
        }, function () {
            $("span").hide();
            $("#bigger").hide();
        })
        $("#small").mousemove(function (ev) {
            ev = ev || event;
            var x = ev.pageX - $(this).offset().left;
            var y = ev.pageY - $(this).offset().top;
            x -= $("span").outerWidth() / 2;
            y -= $("span").outerHeight() / 2;
            if (x < 0) {
                x = 0;
            }
            if (y < 0) {
                y = 0;

            }
            if (x > 95) {
                x = 95;

            }
            if (y > 95) {
                y = 95;

            }
            $("span").css({
                left: x,
                top: y
            })
            //让大图随鼠标移动
            //计算出大图移动的距离
            // 水平方向移动的距离的倍数p：
            // 小div宽/x = 大图宽/X
            // p = 大图宽/小div宽 = 800/300=2.667
            $("#bigger img").css({
                left: -3.2 * x,
                top: -3.2 * y
            })
        })
    </script>

瀑布流

 <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        #box {
            width: 95%;
            margin: 0 auto;
        }

        #box ul {
            width: 100%;
            list-style: none;
            position: relative;
        }

        #box ul li {
            width: 22%;
            margin: 3%;
            padding: 2%;
            position: absolute;
        }

        #box ul li img {
            width: 100%;
        }
    </style>
</head>

<body>
    <div id="box">
        <ul>
            <!-- <img src="img/02.jpg" alt=""> -->
        </ul>
    </div>
</body>
<script type="text/javascript" src="jquery3.5.1.min.js"></script>
<script type="text/javascript">
    var ul = $("#box ul");
    var n = 20;
    
    for (var i = 1; i <= 20; i++) {
        ul.append(`<li><img src=${'img/' + (i < 10 ? ('0' + i) : i) + '.jpg'}></li>`)
        //获取图片
        window.onload = function () {
            //保证图片加载完成
            n--;
            if (n = 1) {
                waterFull();
            }
        }
    }
    function waterFull() {
        var lis = $("#box ul li");//拿出li
        var liWidth = lis.eq(0).outerWidth(true);//获取宽度 包括m  p  b  width
        var colHighArr = [];//创建高度数组
        var cols;
        if ($(window).innerWidth() < 700) {//宽度小于700用两列布局
            cols = 2;
            lis.css("width", "39%");
        }
        else {
            cols = 3;
            lis.css("width", "22%");
        }
        for (var i = 0; i < lis.length; i++) {
            var li = lis.eq(i);
            if (i < cols) {
                li.css({
                    left: i * liWidth,//第一排的位置
                    top: 0
                })
                colHighArr[i] = li.outerHeight(true);//获取三个高度
            }
            else {
                //先找最小列高对应的列号(0或1或2)
                var minHighColIndex = 0;
                if (colHighArr[0] > colHighArr[1]) {//比较高度
                    minHighColIndex = 1;
                }
                if (cols == 3) {
                    if (colHighArr[minHighColIndex] > colHighArr[2]) {
                        minHighColIndex = 2;
                    }
                }