jquery图片散乱无序排列展示_图片筛选翻牌效果

主要js代码预览
function $(selector) {
        var method = selector.substr(0, 1) == "." ? "getElementsByClassName" : "getElementById";
        return document[method](selector.substr(1));
    }

    function turn(elem) {
        var cls = elem.className;
        var n = elem.id.split("_")[1];
        if (!/photo_center/.test(cls)) {
            rsort(n);
            return;
        }
        if (/photo_front/.test(cls)) {
            cls = cls.replace('photo_front', 'photo_back');
            $('.i')[n].className = $('.i')[n].className.replace(/i_current/, 'i_back');
        }
        else if (/photo_back/.test(cls)) {
            cls = cls.replace('photo_back', 'photo_front');
            $('.i')[n].className = $('.i')[n].className.replace(/i_back/, 'i_current');
        }
        return elem.className = cls;
    }


    //遍历myData数据长度 , 写入html ;加载图片的时候 , 还顺带加上对应数量的导航:
    function addMyData() {
        var template = $("#wrap").innerHTML;  //取出wrap里面的值,作为模板,  留待后面替换
        var oHtml = [];                   //存储要替换的内容
        var oNav = [];
        for (var i = 0 ; i < myData.length; i++) {
            var _html = template.replace('{{index}}', i)
                    .replace('{{alt}}', myData[i].caption)
                    .replace('{{img}}', myData[i].img)
                    .replace('{{caption}}', myData[i].caption)
                    .replace('{{desc}}', myData[i].desc)
            oHtml.push(_html);
            oNav.push('<span id="nav_' + i + '" class="i" onclick ="turn($(\'#photo_' + i + '\'))"></span>');
        }
        //遍历创建完成之后 , 不但要把图片传禁区 , 还要把对应 的nav导航条假如:
        oHtml.push('<div class="nav" id="nav">' + oNav.join("") + '</div>');
        $("#wrap").innerHTML = oHtml.join("");
        //图片加载后调用一下随机抽取居中图片:
        rsort(random([0, myData.length - 1]));
    }
    addMyData();       //调用函数 , 载入图片 .

    //取得在特定范围内随机的值:
    function random(range) {
        var min = Math.min(range[0], range[1]);
        var max = Math.max(range[0], range[1]);
        var diff = max - min + 1;//[3,5]
        var n = Math.floor(diff * Math.random()) + min;
        return n;
    }

    //取得左右区域图片的取值活动范围:
    function range() {
        //定义json数组格式:返回对象
        var range = {
            left: {
                x: [], y: []
            },
            right: {
                x: [], y: []
            }
        }
        var wrap = {
            w: $("#wrap").clientWidth,
            h: $("#wrap").clientHeight
        }
        var photo = {
            w: $(".photo")[0].clientWidth,
            h: $(".photo")[0].clientHeight
        }
        range.wrap = wrap;            //向json里面添加json元素.
        range.photo = photo;

        //定义left的xy值范围 , 和right的xy范围值.
        range.left.x = [0 - photo.w / 2, wrap.w / 2 - photo.w / 2];                     //定义json数组中的元素 , 用.方法.
        range.left.y = [0 - photo.h / 2, wrap.h - photo.w / 2];

        range.right.x = [wrap.w / 2 - photo.w / 2, wrap.w - photo.w / 2];                     //定义json数组中的元素 , 用.方法.
        range.right.y = [0 - photo.h / 2, wrap.h - photo.w / 2];

        return range;
    }
    //随机选取一个作为中间的特殊元素,及两边排序.
    function rsort(n) {
        //获取所有的photo , 准备排序
        var _photo = $(".photo");
        var photos = [];
        for (var i = 0 ; i < _photo.length; i++) {
            _photo[i].className = _photo[i].className.replace(/\s*photo_center\s*/, " ");
            _photo[i].className = _photo[i].className.replace(/\s*photo_front\s*/, " ");
            _photo[i].className = _photo[i].className.replace(/\s*photo_back\s*/, " ");

            _photo[i].className += " photo_front ";
            _photo[i].style.left = "";
            _photo[i].style.top = "";
            _photo[i].style['-webkit-transform'] = "rotate(360deg) scale(1.3)";

            photos.push(_photo[i]);
        }
        //定义一张随机图片居中显示:
        var photo_center = $("#photo_" + n);
        photo_center.className += " photo_center ";

        //剔除掉居中显示图片 :
        photo_center = photos.splice(n, 1);
        //定义变量存储数据值
        var ranges = range();
        var photos_left = photos.splice(0, Math.ceil(photos.length / 2));
        var photos_right = photos;
        //通过随机的left和top值 , 随意排列图片:
        for (var j = 0 ; j < photos_left.length; j++) {
            photos_left[j].style.left = random(ranges.left.x) + "px";
            photos_left[j].style.top = random(ranges.left.y) + "px";
            photos_left[j].style["-webkit-transform"] = "rotate(" + random([-150, 150]) + "deg) scale(1)";
        }

        for (var s = 0 ; s < photos_right.length; s++) {
            photos_right[s].style.left = random(ranges.right.x) + "px";
            photos_right[s].style.top = random(ranges.right.y) + "px";
            photos_right[s].style["-webkit-transform"] = "rotate(" + random([-150, 150]) + "deg) scale(1)";
        }
        //图片排序后 , 顺带选出当前选中按钮:
        var navs = $('.i');
        for (var i = 0 ; i < navs.length; i++) {
            //统一先清空:

            navs[i].className = navs[i].className.replace(/\s*i_current\s*/, '');
            navs[i].className = navs[i].className.replace(/\s*i_back\s*/, '');
        }
        navs[n].className += " i_current ";
    }