如何用最简单的方法做一个完整的照片墙（jQuery）

照片墙功能是摆放两列随机旋转度的照片，然后点击哪张，就展示照片原图，其他消失，再次点击则恢复原状

话不多说，上代码

html

// html只要一个ul标签就可以，尽量简单化
        <ul> </ul>

css：

body,html{
           background-color:bisque;
        }
        ul{
            width: 1200px;
            height: 900px;
            /* border: 1px solid; */
            margin: auto;
            perspective: 700px;

        }
        li{
            position: absolute;
            transform-style: preserve-3d;
            list-style: none;
        }
        li img{
            border: 10px solid white;
        }

jQuery：

// 获取ul的宽高
        var ulw = parseInt($('ul').css('width'))
        var ulh = parseInt($('ul').css('height'))

        
        //确定每一个li宽高
        var liw = ulw / 4
        var lih = ulh / 2
        create()

        function create(){
            var k = 1
            for(var i = 0;i < 2;i ++){
                for(var j = 0;j < 4;j++){
                  //创建li标签
                    $('ul').append('<li><img /></li>');
                    //创建8次，每创建一次设置最后一个li标签的样式
                    $('ul li:last').css({
                        'with': liw + 'px',
                        'height':lih + 'px',
                        'left':j*liw,
                        'top':i*lih,
                        'transform':'tanslateZ('+(Math.random()*150)+'px)'
                    }).find('img').css({	//设置照片样式
                        'width':'250px',
                        'height':'400px',
                        'display':'none'	//设置为none是因为下面要用到淡出淡入的方法
                    }).attr('src','img/'+k+'.jpg')	//提醒，这里的方法是必须把照片的名称改成1到8
                    k++;
                    $('img').fadeIn(2000)
                }
            }
               //设置随机旋转度
               var li=$('li');
               for(var k=0;k<li.length;k++){
                var aa = Math.floor(Math.random()*180)
                 $('li img').eq(k).css({
                    'transform':'rotate('+aa+'deg)'
                 })
               }
            }
            //点击照片
            $('img').on('click','img',function(){
                var bgimg = $(this).attr('src');
                //清空子元素
                $('ul').empty();
                $('ul').append('<img />').find('img').addClass('imge').css({
                    'width':'auto',
                    'height':'100%',
                    'display':'none'
                }).attr('src',bgimg)
                $('ul img').fadeIn(2000);
                $('.imge').click(function(){
                    $('ul').empty();
                    create();
                })
            })

这是成品

点击