jquery+photopile实现错乱堆叠照片墙点击放大切换效果代码

代码语言:html

所属分类:画廊相册

代码描述:jquery+photopile实现错乱堆叠照片墙点击放大切换效果代码

代码标签: jquery photopile 错乱 堆叠 照片墙 点击 放大 切换

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.min.css">

<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/photopile.min.css">
    <style>
        body {
      background: #ffffff;
    }
    
    div.photopile-wrapper {
      margin: 175px auto;
      width: 750px;
    }
    </style>
</head>

<body>
    <div class="photopile-wrapper">
        <ul class="photopile">
            <li>
                <a href="//repo.bfw.wiki/bfwrepo/image/5e0c6f962a0d0.png">
                    <img src="//repo.bfw.wiki/bfwrepo/image/5e0c6f962a0d0.png" alt="Barton Dam, Ann Arbor, Michigan" width="133" height="100" />
                </a>
            </li>
             <li>
                <a href="//repo.bfw.wiki/bfwrepo/image/5e0c6f962a0d0.png">
                    <img src="//repo.bfw.wiki/bfwrepo/image/5e0c6f962a0d0.png" alt="Barton Dam, Ann Arbor, Michigan" width="133" height="100" />
                </a>
            </li>
            <li>
                <a href="//repo.bfw.wiki/bfwrepo/image/5e0c6f962a0d0.png">
                    <img src="//repo.bfw.wiki/bfwrepo/image/5e0c6f962a0d0.png" alt="Barton Dam, Ann Arbor, Michigan" width="133" height="100" />
                </a>
            </li>
           <li>
                <a href="//repo.bfw.wiki/bfwrepo/image/5e0c6f962a0d0.png">
                    <img src="//repo.bfw.wiki/bfwrepo/image/5e0c6f962a0d0.png" alt="Barton Dam, Ann Arbor, Michigan" width="133" height="100" />
                </a>
            </li>
           <li>
                <a href="//repo.bfw.wiki/bfwrepo/image/5e0c6f962a0d0.png">
                    <img src="//repo.bfw.wiki/bfwrepo/image/5e0c6f962a0d0.png" alt="Barton Dam, Ann Arbor, Michigan" width="133" height="100" />
                </a>
            </li>
           <li>
                <a href="//repo.bfw.wiki/bfwrepo/image/5e0c6f962a0d0.png">
                    <img src="//repo.bfw.wiki/bfwrepo/image/5e0c6f962a0d0.png" alt="Barton Dam, Ann Arbor, Michigan" width="133" height="100" />
                </a>
            </li>
            <li>
                <a href="//repo.bfw.wiki/bfwrepo/image/5e0c6f962a0d0.png">
                    <img src="//repo.bfw.wiki/bfwrepo/image/5e0c6f962a0d0.png" alt="Barton Dam, Ann Arbor, Michigan" width="133" height="100" />
                </a>
            </li>
             <li>
                <a href="//repo.bfw.wiki/bfwrepo/image/5e0c6f962a0d0.png">
                    <img src="//repo.bfw.wiki/bfwrepo/image/5e0c6f962a0d0.png" alt="Barton Dam, Ann Arbor, Michigan" width="133" height="100" />
                </a>
            </li>
            <li>
                <a href="//repo.bfw.wiki/bfwrepo/image/5e0c6f962a0d0.png">
                    <img src="//repo.bfw.wiki/bfwrepo/image/5e0c6f962a0d0.png" alt="Barton Dam, Ann Arbor, Michigan" width="133" height="100" />
                </a>
            </li>
             <li>
                <a href="//repo.bfw.wiki/bfwrepo/image/5e0c6f962a0d0.png">
                    <img src="//repo.bfw.wiki/bfwrepo/image/5e0c6f962a0d0.png" alt="Barton Dam, Ann Arbor, Michigan" width="133" height="100" />
                </a>
            </li>
            <li>
                <a href="//repo.bfw.wiki/bfwrepo/image/5e0c6f962a0d0.png">
                    <img src="//repo.bfw.wiki/bfwrepo/image/5e0c6f962a0d0.png" alt="Barton Dam, Ann Arbor, Michigan" width="133" height="100" />
                </a>
            </li>
           <li>
                <a href="//repo.bfw.wiki/bfwrepo/image/5e0c6f962a0d0.png">
                    <img src="//repo.bfw.wiki/bfwrepo/image/5e0c6f962a0d0.png" alt="Barton Dam, Ann Arbor, Michigan" width="133" height="100" />
                </a>
            </li>
          <li>
                <a href="//repo.bfw.wiki/bfwrepo/image/5e0c6f962a0d0.png">
                    <img src="//repo.bfw.wiki/bfwrepo/image/5e0c6f962a0d0.png" alt="Barton Dam, Ann Arbor, Michigan" width="133" height="100" />
                </a>
            </li>
           <li>
                <a href="//repo.bfw.wiki/bfwrepo/image/5e0c6f962a0d0.png">
                    <img src="//repo.bfw.wiki/bfwrepo/image/5e0c6f962a0d0.png" alt="Barton Dam, Ann Arbor, Michigan" width="133" height="100" />
                </a>
            </li>
            <li>
                <a href="//repo.bfw.wiki/bfwrepo/image/5e0c6f962a0d0.png">
                    <img src="//repo.bfw.wiki/bfwrepo/image/5e0c6f962a0d0.png" alt="Barton Dam, Ann Arbor, Michigan" width="133" height="100" />
                </a>
            </li>
            <li>
                <a href="//repo.bfw.wiki/bfwrepo/image/5e0c6f962a0d0.png">
                    <img src="//repo.bfw.wiki/bfwrepo/image/5e0c6f962a0d0.png" alt="Barton Dam, Ann Arbor, Michigan" width="133" height="100" />
                </a>
            </li>
            <li>
                <a href="//repo.bfw.wiki/bfwrepo/image/5e0c6f962a0d0.png">
                    <img src="//repo.bfw.wiki/bfwrepo/image/5e0c6f962a0d0.png" alt="Barton Dam, Ann Arbor, Michigan" width="133" height="100" />
                </a>
            </li>
           <li>
                <a href="//repo.bfw.wiki/bfwrepo/image/5d653b1fc8bc9.png">
                    <img src="//repo.bfw.wiki/bfwrepo/image/5d653b1fc8bc9.png" alt="Barton Dam, Ann Arbor, Michigan" width="133" height="100" />
                </a>
            </li>
             <li>
                <a href="//repo.bfw.wiki/bfwrepo/imag.........完整代码请登录后点击上方下载按钮下载查看

网友评论0