照片牆

時間 2019-12-13

原文原文鏈接

<html>
<head >
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>照片牆</title>
    <style>
        body {
            margin: 20px;
            background-color: #E9E9E9;
        }

        div.div1 {
            float: left;
            width: 100px;
            padding: 10px;
            border: 1px solid #BFBFBF;
            background-color: #FFFFFF;
            transform: rotate(5deg);
            box-shadow: 2px 2px 3px #aaaaaa;
            margin-left: 10px;
            margin-bottom: 20px;
            text-align:center;
        }

        div.div2 {
            float: left;
            width: 100px;
            padding: 10px;
            border: 1px solid #BFBFBF;
            background-color: #FFFFFF;
            transform: rotate(-4deg);
            box-shadow: 2px 2px 3px #aaaaaa;
            margin-left: 10px;
            margin-bottom: 20px;
            text-align: center;
        }

        img{
            width: 100px;
            height: 100px;
            padding-bottom: 10px;
        }

        label {
            text-align: center;
            font-family: "Times New Roman",Georgia,Serif;
            font-size: 12px;
        }

        hr {
            border: #BFBFBF;
        }

    </style>
</head>
<body>
    <!--<hr width="100%" style="margin-top: -5px; border: 0.5px dashed #BFBFBF;" />-->
</body>
<script src="js/jquery-1.11.1.min.js"></script>
<script>
    $(function () {
        var data = "[";
        var size = 12;
        for (var index = 0; index < size; index++){
            data += '{ "imgsrc": "image/webwxgeticon.jpg", "des": "頭像： 暗夜幽蘭" }';
            if(index != size - 1){
                data += ",";
            }
        }
        data += "]";

        var obj = jQuery.parseJSON(data);
        var html = "";
        var className = "div1";
        for (var index = 0; index < obj.length; index++) {
            if(index % 2 == 0){
                className = "div1";
            } else {
                className = "div2";
            }
            html += "<div class='" + className + "'>"
                    + "<img src='" + obj[index].imgsrc + "'/>"
                    + "<label>" + (index + 1) + '.' + obj[index].des + "</label>"
                    + "</div>";
        }
        
        $("body").append(html);
    });
</script>
</html>

效果以下：css

來源：http://www.w3school.com.cn/tiy/t.asp?f=css3_image_galleryhtml

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。