照片墙

时间：2016-07-22 18:52:19 阅读：123 评论：0 收藏：0 [点我收藏+]

标签：

<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>

效果如下：

技术分享

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

照片墙

标签：

原文地址：http://www.cnblogs.com/moyan03/p/5695924.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行