master

分支 (1)

管理

管理

master

ClassProject
/
album.html

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="css/handoop.css" rel="stylesheet" type="text/css">
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css">
    <script src="js/jquery-1.11.1.js"></script>
    <script src="js/bootstrap.js"></script>

</head>
<body>
<div class="header">

    <!--导航1-->
    <div class="hNavBar">
        <div class="wrap">
            <div class="navBar-left">
                <ul class="ul-hor">
                    <li><a href="index.html">首页</a></li>
                    <li data-list="toggle">
                        <a href="#">讨论区</a>
                        <span class="caret"></span>
                        <ul class="dropDownList" data-list="menu">
                            <li><a href="#">技术问答 »</a></li>
                            <li><a href="#">技术分享 »</a></li>
                            <li><a href="#">经验分享 »</a></li>
                            <li><a href="#">站务建议 »</a></li>
                        </ul>
                    </li>
                    <li><a href="#">开源代码</a></li>
                    <li><a href="#">新闻资讯</a></li>
                    <li><a href="#">个人博客</a></li>
                    <li><a href="album.html">班级相册</a></li>
                    <li><a href="media.html">班级视频</a></li>
                    <li><a href="#">关于我们</a></li>
                </ul>
            </div>
            <div class="navBar-right">
                <ul class="ul-hor">
                    <li><a href="login.html">登陆</a></li>
                    <li>|</li>
                    <li><a href="register.html">注册</a></li>
                </ul>
            </div>
        </div>
    </div>

    <!--导航2-->
    <div class="wrap">
        <div class="navLogo">
            <a href="index.html">
                <img src="images/classLogo.jpg"/>
            </a>
            <div class="search">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="search">
                    <span class="input-group-addon">search</span>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="wrap" style="margin-top: 30px">
    <ul id="masonry_ghost">
        <li class="post"><img src="images/ggit/00@6WUFS4NEY8_{R$5Y39LQ.jpg"></li>
        <li class="post"><img src="images/ggit/]D`YR@USM`48OG](2%I1][L.jpg"></li>
        <li class="post"><img src="images/ggit/A37{B(W4{])`W@RG{$W_~1G.jpg"></li>
        <li class="post"><img src="images/ggit/P@~S{3GF8EN}GTL~7ATQSCB.jpg"></li>
        <li class="post"><img src="images/ggit/Q~@)%V]]1ZC{CE7%2(VGZHH.jpg"></li>
        <li class="post"><img src="images/ggit/Y$JBM(MS6`37{C99BM)AGDL.jpg"></li>
        <li class="post"><img src="images/ggit/$I18Q~QBH3WJE6`DT[595LL.jpg"></li>
        <li class="post"><img src="images/ggit/$P0XD%Z6S(J5Z[%H%_}W`KK.jpg"></li>
        <li class="post"><img src="images/ggit/1AWRT%UCF0TG])M[PZ{3H14.jpg"></li>
        <li class="post"><img src="images/ggit/_R[_8ULX(ZY$`KLG(GJO6}R.jpg"></li>
        <li class="post"><img src="images/ggit/CXQ6}A[}}S2H9S4658{OH8L.jpg"></li>
        <li class="post"><img src="images/ggit/LG`{`ORMVU}LON@WR9Z4PSH.jpg"></li>
        <li class="post"><img src="images/ggit/T{~[%[6ZCA{OT_20HZ~S$@R.jpg"></li>
    </ul>
</div>

<script src="js/handoop.js"></script>
<script type="text/javascript" src="js/masonry.pkgd.js"></script>
<script type="text/javascript" src="js/imagesloaded.pkgd.min.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        $("[data-list='toggle']").dropMenu();

        var $container = $("#masonry_ghost");
        $container.imagesLoaded(function(){
            $container.masonry({
                columnWidth: 330,
                itemSelector: '.post',
                gutter: 14,
                isAnimated: true
            });
        });
    });
</script>
</body>
</html>