分享一个无序的图片画廊，效果很炫！

效果图如下：


Paste_Image.png

分享一个我做的图片画廊，原生js，注释写的很详细，如果有错误请指出
其中最后是加载的数据，没有使用json，用的是JavaScript，
其中有些参数设置的不对，我也没有调，但是原理，肯定是对的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="js/jquery-2.1.4.min.js" type="text/javascript"></script>
    <script src="data.js" type="text/javascript" charset="gb2312"></script>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            background-color: #ffffff;
            color: #555555;
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-size: 14px;
            -webkit-font-smoothing:antialiased;
        }
        .wrap{
            width: 100%;
            height: 600px;
            position: absolute;
            top: 50%;
            margin-top: -300px;
            background-color: #333333;
            overflow: hidden;
            -webkit-perspective:800px;
        }
        /*海报样式*/
        .photo{
            width: 260px;
            height: 320px;
            position: absolute;
            z-index: 1;
            box-shadow: 0 0 1px rgba(0,0,0,0.1);
            -webkit-transition: all 1s;


            left: 50%;
            top: 50%;
            margin: -160px 0 0 -130px;
        }
        .photo .side{
            width: 100%;
            height: 100%;
            background-color: #eeeeee;
            position: absolute;
            top: 0;
            right:0;
            padding: 20px;
            box-sizing: border-box;/*就是内容会在border中呈现，padding会包含在border内*/
        }
        .photo .side-front{

        }
        .photo .side-front .image {
            width: 100%;
            height: 250px;
            line-height: 250px;/*当图片不满250px时，由于line-height会自动垂直居中*/
            overflow: hidden;
        }
        .photo .side-front .image img{
            width: 100%;/*回从上一层来寻找具体数字*/
        }
        .photo .side-front .caption{
            text-align: center;/*对其居中*/
            font-size: 16px;
            line-height: 50px;
        }
        .photo .side-back{

        }
        .photo .side-back .desc{
            color: #666;
            font-size: 14px;
            line-height: 1.5em;
        }
        /*当前选中海报的样式*/
        .photo_center{
            left: 50%;
            top: 50%;
            margin: -160px 0 0 -130px;
            z-index: 999;
        }
        /*负责翻转*/
        .photo-wrap{
            position: absolute;
            width: 100%;
            height: 100%;
            -webkit-transform-style: preserve-3d; /*设置3d样式*/ 
            -webkit-transition: all 0.6s;
        }
        .photo-wrap .side-front{
            -webkit-transform: rotateY(0deg);
        }
        .photo-wrap .side-back{
            -webkit-transform: rotateY(180deg);
        }
        .photo-wrap .side{
             -webkit-backface-visibility: hidden;
         }
         .photo_front .photo-wrap{
             -webkit-transform: rotateY(0deg);
         }
         .photo_back .photo-wrap{
             -webkit-transform: rotateY(180deg);
         }
        .nav{
            width: 80%;
            height: 30px;
            line-height: 30px;
            position: absolute;
            left: 10%;
            bottom: 20px;
            z-index: 999;
            background-color: white;
            text-align: center;
        }
        /*普通样式 和当前选中样式 翻转样式*/
        .nav .i{ /*i代表的span是一个行内元素，要为其设置行高宽度，必须是一个block元素，inline-block 由于是inline不会换行，而且是block块级元素*/
            width: 30px;
            height: 30px;
            display: inline-block;
            cursor: pointer;
            background-color: #eeeeee;
            text-align: center;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;

            -webkit-transform: scale(0.48);
            -webkit-transition: all 1s;
        }
        .nav .i:after{
            content: "123";
            background-color: #f8efc0;
            font-size: 150%;
            line-height: 30px;

        }
        .nav .i_current{
            -webkit-transform: scale(1);
        }
        .nav .i_current:after{
            opacity: 1;
        }
        .nav .i_back{
            -webkit-transform:rotateY(-180deg);
            background-color: #555555;
        }


        /*
            优化样式
        */
        .photo-wrap{  /*规定动画开始结束的位置*/ 
            -webkit-transform-origin: 0% 50%;
        }
        .photo_front .photo-wrap{ /*正面动画*/  
            -webkit-transform: translate(0px,0px) rotateY(0deg);
        }
        .photo_back .photo-wrap{  /*反面动画*/   
            -webkit-transform: translate(220px , 0px) rotateY(180deg);
        }

    </style>
</head>
<body onselect="return false">
    <div class="wrap" id="wrap">
        <!--负责xy的移动-->
        <div class="photo photo_center  photo_front" id="photo_{{index}}" onclick="turn(this)">
            <!--photo-wrap负责样式翻转-->
            <div class="photo-wrap">
                <div class="side side-front">
                    <p class="image"></p>
                    <p class="caption">{{caption}}</p>
                </div>
                <div class="side side-back ">
                    <p class="desc">{{desc}}</p>
                </div>
            </div>
        </div>
    </div>

</body>

<script type="text/javascript">

    //3、通用函数
    function g(selecter){
        var method=selecter.substr(0,1)=="." ? "getElementsByClassName":"getElementById";//从0位开始选取下标为1的值；
        return document[method](selecter.substr(1));
    }
    //随机生成一个数值 支持取值范围
    function random(range){
        var max=Math.max(range[0],range[1]);
        var min=Math.min(range[0],range[1]);
        var diff=max-min;
        var number=Math.ceil(Math.random()*diff+min);
        return number;
    }
    //4、输出所有海报对象 首先获得模板字符串，关键字替换
    var data=data;
    function addPhoto(){
        var template=g("#wrap").innerHTML;//获取当前对象所有的内容，取得当前模板的内容
        var html=[];
        var nav=[];//声明一个数组，来保存一个个导航条
        for( var s in data){ //s的值为data里面的序号 1 2 3 4
            var _html=template.replace('{{index}}',s).replace('{{img}}', data[s].img).replace('{{caption}}',data[s].caption).replace('{{desc}}',data[s].desc); //替换模板的内容，通过replace
            html.push(_html);
            nav.push('<span onclick="turn(g(\'#photo_'+s+'\'))" class="i" id="nav_'+s+'"  >&nbsp</span>'); //turn(g(\'#photo_'+s+'\'))是为了与 photo_{{index}}} 对应，\'\'因为''也是要传入的，所以加上反斜杠 点击这个按钮直接操作图片，在操作图片的同时带动按钮效果
        }
        html.push('<div class="nav">'+nav.join('')+'</div>')
        g("#wrap").innerHTML=html.join('');//如果不在html加入''则默认会加入，
        rsort(random([0,data.length]));
    }

    //计算左右分区的范围 {left:{x:[min,max] y:[min,max]}}
    function range(){
        var range={left:{x:[],y:[]},right:{x:[],y:[]}}; //通过对象来存储
        var wrap={ //当前相册的高度和宽度
            w:g("#wrap").clientWidth,
            h:g("#wrap").clientHeight
        };
        var photo={ //任意一个photo的宽度
            w:g(".photo")[0].clientWidth,
            h:g(".photo")[0].clientHeight
        };
        //把两个对象作为属性，附加到到range中,结果为Object {left: Object, right: Object, wrap: Object, photo: Object}
        range.wrap=wrap;
        range.photo=photo;
        //先声明一个对象，然后在逐个赋值
        range.left.x=[0-photo.w,wrap.w/2-photo.w/2];
        range.left.y=[0-photo.h,wrap.h];

        range.right.x=[wrap.w/2+photo.w/2,wrap.w+photo.w];
        range.right.y=range.left.y;
        return range;
    }
    //排序海报
    function rsort(n){
        var _photo=g('.photo'); //此时通过选择器生成的是类数组，只有数组的lenght属性，要转成真正的数组，来被调用
        var photos=[];
        for(var i=0;i<_photo.length;i++){
            _photo[i].className=_photo[i].className.replace(/\s*photo_center\s*/,' ');//遍历photo数组去掉photo_center样式
            _photo[i].className=_photo[i].className.replace(/\s*photo_front\s*/,' ');//遍历photo数组去掉photo_front样式
            _photo[i].className=_photo[i].className.replace(/\s*photo_back\s*/,' ');//遍历photo数组去掉photo_back样式
            /*由于去掉photo_front和photo_back所以要初始化一个正反面的效果*/
            _photo[i].className+=' photo_front ';
             /*如果不去掉front_center的font_back和front_front样式，在最开始初始化的时候，无法居中，包括下面的left和top*/ 
            _photo[i].style.left='';
            _photo[i].style.top='';
            _photo[i].style['-webkit-transform']='rotate(0deg) scale(1.3)';
            photos.push(_photo[i]);//生成一个真正的数组，包括所有的照片
        }
        var photo_center=g("#photo_"+n); //document.getelementById("photo_"+n)同样适用
        photo_center.className+=' photo_center';//为第n个元素添加样式
        photo_center=photos.splice(n,1)[0]; //从photos中从第n个元素开始，删除第一个元素，从中取出第0个；这样photos中剩余元素19个
        //把剩下的海报分为两个部分，splice直接切除
        var photos_left=photos.splice(0,Math.ceil(photos.length*0.5));
        var photos_right=photos;

        var ranges=range();

        for(var s in photos_left){
            var photo=photos_left[s];
            /*photo.style.left=random(ranges.left.x)+"px";
            photo.style.top=random(ranges.left.y)+"px";*/

            photo.style["-webkit-transform"]="translate("+random(ranges.left.x)+"px,"+random(ranges.left.y)+"px)  rotate("+random([0,-180])+"deg)";

            //photo.style["-webkit-transform"]="rotate("+random([-150,150])+"deg ) scale(1)";
        }
        for(var s in photos_right){
            var photo=photos_right[s];
            //photo.style.left=random(ranges.right.x)+"px"; //左右分开的样式
            //photo.style.top=random(ranges.right.y)+"px"; //左右分开的样式 
            photo.style["-webkit-transform"]="translate("+random(ranges.right.x)+"px,"+random(ranges.right.y)+"px)  rotate("+random([0,180])+"deg)"；//通过webkit-transform来实现圆圈旋转样式
            //photo.style["-webkit-transform"]="rotate("+random([-150,150])+"deg ) scale(1)";//style类型作为数组来保存在style中
        }

        /*按钮部分*/
        /*首先清除*/
        var nav=g('.i');
        for(var s=0;s<nav.length;s++){
            nav[s].className=nav[s].className.replace(/\s*i_current\s*/,' ');
            nav[s].className=nav[s].className.replace(/\s*i_back\s*/,' ');
        }
        g('#nav_'+n).className= g('#nav_'+n).className+' i_current ';

    }
    addPhoto();
    //翻面控制
    function turn(elem){

        var cls=elem.className;
        n=elem.id.split('_')[1];

        if(!/photo_center/.test(cls)){
            return rsort(n);//n为当前元素id索引的编号
        }

        if(/photo_front/.test(cls)){
            cls=cls.replace(/photo_front/,'photo_back');
            g('#nav_'+n).className+=' i_back ';
        }else{
            cls=cls.replace(/photo_back/,'photo_front');
            g('#nav_'+n).className=g('#nav_'+n).className.replace(/\s*i_back\s*/,' ');
        }
        elem.className=cls;

    }
</script>
</html>


date.js

/**
* Created by tiantan on 2015-9-19.
*/
var data=[];
var datasinfo='1、如晴天，似雨天<br>\
<br>\
导演: 弗兰克·威利<br>\
编剧: 弗兰克·威利<br>\
主演: 朱利安·夏特金 / 莉顿·梅斯特 / 黛博拉·梅辛 / 欧嘉·梅雷迪斯 / 韦恩·普雷特洛 / 更多...<br>\
类型: 剧情 / 音乐<br>\
制片国家/地区: 美国<br>\
语言: 英语<br>\
上映日期: 2014-09-27(瑞丹丝电影节) / 2015-03-13(美国)<br>\
片长: 104分钟<br>\
<br>\
<br>\
2、铁拳<br>\
<br>\
导演: 安东尼·福奎阿<br>\
编剧: 科特·萨特<br>\
主演: 杰克·吉伦哈尔 / 福里斯特·惠特克 / 瑞秋·麦克亚当斯 / 娜奥米·哈里斯 / 50分 / 更多...<br>\
类型: 剧情 / 动作 / 运动<br>\
官方网站: southpawfilm.com<br>\
制片国家/地区: 美国 / 中国大陆<br>\
语言: 英语<br>\
上映日期: 2015-07-24(美国)<br>\
片长: 123分钟<br>\
<br>\
<br>\
3、公主夜游记 <br>\
<br>\
导演: 朱里安·杰拉德<br>\
编剧: Trevor De Silva / Kevin Hood<br>\
主演: 莎拉·加顿 / 贝尔·波利 / 艾米丽·沃森 / 鲁伯特·艾弗雷特 / 杰克·莱诺 / 更多...<br>\
类型: 剧情 / 爱情<br>\
制片国家/地区: 英国<br>\
语言: 英语<br>\
上映日期: 2015-05-15(英国)<br>\
片长: 97分钟<br>\
<br>\
<br>\
4、暗杀教室<br>\
<br>\
导演: 羽住英一郎<br>\
编剧: 金沢達也<br>\
主演: 山田凉介 / 菅田将晖 / 山本舞香 / 竹富圣花 / 优希美青 / 更多...<br>\
类型: 剧情 / 动作<br>\
官方网站: ansatsu-movie.com<br>\
制片国家/地区: 日本<br>\
语言: 日语<br>\
上映日期: 2015-03-21(日本)<br>\
片长: 110分钟<br>\
<br>\
<br>\
5、生缝寸尺心 繕い裁つ人<br>\
<br>\
导演: 三岛有纪子<br>\
编剧: 池辺葵(原作)<br>\
主演: 中谷美纪 / 三浦贵大 / 片桐入 / 黑木华 / 杉咲花 / 更多...<br>\
官方网站: tsukuroi.gaga.ne.jp<br>\
制片国家/地区: 日本<br>\
语言: 日语<br>\
上映日期: 2015-01-31(日本)<br>\
片长: 104分钟<br>\
又名: 裁缝师的美丽人生(台) / 裁缝 / Tsukuroi t<br>\
<br>\
<br>\
6、非我 Self/less<br>\
<br>\
导演: 塔西姆·辛<br>\
编剧: 大卫·帕斯特尔 / 亚历克斯·帕斯特尔<br>\
主演: 瑞恩·雷诺兹 / 本·金斯利 / 马修·古迪 / 娜塔丽·马丁内兹 / 米歇尔·道克瑞 / 更多...<br>\
类型: 科幻 / 悬疑 / 惊悚<br>\
官方网站: selflessmovie.tumblr.com<br>\
制片国家/地区: 美国<br>\
语言: 英语<br>\
上映日期: 2015-07-10(美国)<br>\
片长: 117分钟<br>\
<br>\
<br>\
7、我是路人甲<br>\
<br>\
导演: 尔冬升<br>\
编剧: 尔冬升<br>\
主演: 万国鹏 / 王婷 / 沈凯 / 徐小琴 / 林晨 / 更多...<br>\
类型: 剧情 / 喜剧<br>\
制片国家/地区: 中国大陆<br>\
语言: 汉语普通话 / 粤语 / 浙江方言<br>\
上映日期: 2015-07-03(中国大陆)<br>\
片长: 134分钟<br>\
<br>\
<br>\
8、命中注定<br>\
<br>\
导演: 张皓<br>\
编剧: 赵硕 / 黛安·德雷克<br>\
主演: 汤唯 / 廖凡 / 苏岩 / 方芳 / 刘韬 / 更多...<br>\
类型: 喜剧 / 爱情<br>\
制片国家/地区: 中国大陆 / 香港 / 美国<br>\
语言: 汉语普通话 / 意大利语 / 英语<br>\
上映日期: 2015-07-24(中国大陆)<br>\
片长: 113分钟<br>\
<br>\
<br>\
9、故事的故事<br>\
<br>\
导演: 马提欧·加洛尼<br>\
编剧: 马提欧·加洛尼 / Edoardo Albinati / 乌戈·奇蒂 / Massimo Gaudioso<br>\
主演: 萨尔玛·海耶克 / 文森特·卡索 / 约翰·C·赖利 / 托比·琼斯 / 雪莉·亨德森 / 更多...<br>\
类型: 历史 / 奇幻<br>\
制片国家/地区: 意大利 / 法国 / 英国<br>\
语言: 英语 / 意大利语<br>\
上映日期: 2015-05-14(意大利)<br>\
片长: 125分钟<br>\
<br>\
<br>\
10、小森林<br>\
<br>\
导演: 森淳一<br>\
编剧: 森淳一<br>\
主演: 桥本爱 / 三浦贵大 / 松冈茉优 / 温水洋一 / 桐岛加恋<br>\
类型: 剧情<br>\
官方网站: littleforest-movie.jp/ws/<br>\
制片国家/地区: 日本<br>\
语言: 日语<br>\
上映日期: 2015-02-14(日本)<br>\
片长: 120分钟<br>\
<br>\
<br>\
11、唇上之歌<br>\
<br>\
导演: 三木孝浩<br>\
编剧: 持地佑季子 / 登米裕一 / 中田永一 / 乙一<br>\
主演: 新垣结衣 / 木村文乃 / 桐谷健太 / 恒松祐里 / 下田翔大 / 更多...<br>\
类型: 剧情<br>\
官方网站: kuchibiru.jp<br>\
制片国家/地区: 日本<br>\
语言: 日语<br>\
上映日期: 2015-02-28(日本)<br>\
片长: 132分钟<br>\
<br>\
<br>\
12、小男孩<br>\
<br>\
导演: 阿加多·蒙特沃德<br>\
编剧: 阿加多·蒙特沃德 / Pepe Portillo<br>\
主演: 雅各布·萨尔瓦提 / 凯文·詹姆斯 / 迈克尔·拉帕波特 / 大卫·亨瑞 / 艾米丽·沃森 / 更多...<br>\
类型: 剧情 / 喜剧 / 战争<br>\
制片国家/地区: 墨西哥 / 美国<br>\
语言: 英语<br>\
上映日期: 2015-04-24(美国)<br>\
片长: 106分钟<br>\
';

var d=datasinfo.split("<br><br><br>")
for(var i=0;i< d.length;i++){
    var tittle=d[i].split("<br><br>");
    data.push({
        //img:tittle[0].replace('、',' ')+".img",
        img:"image/"+tittle[0].split("、")[0]+".jpg",
        caption:tittle[0].split("、")[1],
        desc:d[i]
    });
    console.log(tittle[0].replace('、',' ')+"img");
}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 194,457评论 5赞 459
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 81,837评论 2赞 371
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 141,696评论 0赞 319
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,183评论 1赞 263
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 61,057评论 4赞 355
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,105评论 1赞 272
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,520评论 3赞 381
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,211评论 0赞 253
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,482评论 1赞 290
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,574评论 2赞 309
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,353评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,213评论 3赞 312
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,576评论 3赞 298
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,897评论 0赞 17
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,174评论 1赞 250
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,489评论 2赞 341
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,683评论 2赞 335

推荐阅读更多精彩内容

  • Android - 收藏集
    Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,050评论 25赞 707
  • Spring Cloud
    Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具（例如配置管理，服务发现，断路器，智...
    卡卡罗2017阅读 134,497评论 18赞 139
  • 孩子：你说，我们听！
    牧牧妈咪原创第7篇文章 上周五接孩子时，他们老师跟我做了分享。中午冯老师一直陪着牧牧，牧牧就坐在她的腿上，对她说：...
    牧牧妈咪阅读 292评论 0赞 0