瀑布流及灯箱效果

来源：互联网发布：阿里云企业备案表编辑：程序博客网时间：2024/04/28 12:24
前段时间只写了瀑布流，今天抽时间把灯箱效果也补充了，欢迎来访！
先来看看效果图吧
瀑布流如下：
这里写图片描述
灯箱效果如下：
这里写图片描述
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>灯箱效果</title>    <script type="text/javascript" src="js/jquery.min.js"></script>    <style type="text/css">        *{padding: 0;margin: 0;}        h2{font-size: 30px;color: #63d9ee;text-align: center;font-weight: normal;margin: 20px 0;}        .waterfull{width: auto;}        .waterfull ul{list-style: none;width: 305px;float: left;margin: 5px;}        .waterfull ul img{width: 100%;margin: 5px;cursor:pointer;}        .lightBox{position: relative;display: none;z-index: 2;}        .lightBox_bg{position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0,0,0,0.7);z-index: 2;}        .lightBox_img{position: fixed;left: 50%;top: 50%;transform: translate(-50%,-50%);background: #fff;z-index: 3;padding: 10px;border-radius: 2px;}        .lightBox_img img{display: block;}        .lightBox_img strong{display: block;font-weight: normal;padding: 10px;}    </style></head><body>    <!-- <h2>瀑布流</h2> -->    <div class="waterfull">        <ul></ul>        <ul></ul>        <ul></ul>        <ul></ul>        <ul></ul>        <ul></ul>    </div>    <script type="text/javascript">        var imgUl = document.querySelectorAll('ul');        createImg(30)        function createImg(imgCount){            for (var i = 0; i < imgCount; i++) {                var imgli = document.createElement('li');                var imgImg = document.createElement('img');                imgImg.src="image/" + i +".jpg";                imgImg.alt="陈乔恩";                imgli.appendChild(imgImg);                var minUl = imgUl[0]; //假设一个最小的ul                for (var j = 0; j < imgUl.length; j++) { // 循环找出长度最小的ul                    if(minUl.offsetHeight > imgUl[j].offsetHeight){                        minUl = imgUl[j];                    }                }                minUl.appendChild(imgli); // 在长度最小的ul中追加li            }        }    </script>    <script>        $(function(){            // 灯箱效果            $("body").append('<div class="lightBox"><div class="lightBox_img"><img><strong></strong></div><div class="lightBox_bg"></div></div>');            showImg();            function showImg(){ // 图片灯箱效果函数                var win = $(window),                    winH = win.height(),                    winW = win.width();                var showImg = $('.lightBox_img').find('img');                showImg.css({                    "max-width": ~~(winW*0.9) + 'px',                    "max-height": ~~(winH*0.9) + 'px'                });                $(".waterfull ul li img").click(function() {                    var srcc= $(this).attr('src'),                        altt= $(this).attr('alt');                        $('.lightBox_img img').attr('src',srcc);                        $('.lightBox_img strong').html(altt);                        $(".lightBox").show()                });                $(".lightBox .lightBox_bg").click(function(){                    $(".lightBox").hide()                });            }        });    </script></body></html>
0 0