jQuery简易照片墙

jQuery照片墙

照片墙在网络上也是非常常见的东西，各式各样的照片墙，有着各式各样的新奇的特效

照片墙效果图

点击要查看的图片，然后图片放大，再次点击后还原

代码分析

首先设置出最开始的样式

 <style>
        * {
   
            padding: 0;
            margin: 0;
            list-style: none;
        }
        
        html,
        body,
        .warpper {
   
            width: 100%;
            height: 100%;
            background-color: rgb(201, 200, 200);
        }
        
        .wrapul {
   
            width: 80%;
            height: 80%;
            margin: 50px auto;
            border: red solid 1px;
            position: relative;
        }
        
        .wrapul li {
   
            position: absolute;
        }
        
        .wrapul img {
   
            border: springgreen solid 5px;
        }
    </style>
    <div class="warpper">
        <ul class="wrapul"></ul>
    </div>

引入jQuery，添加jQuery脚本

<script>
        // 获取ul的宽高
        var wrapul = $('.wrapul');
        var wrapw = parseInt(wrapul.css('width'));
        var wraph = parseInt(wrapul.css('height'));
        // 确定每个ul里面li的宽高
        var liw = wrapw / 4;
        var lih = wraph / 3;

        create();