bootstrap 卡片card图片布局

kenick
已于 2024-05-23 08:52:07 修改
阅读量3.2k
点赞数
分类专栏：前端文章标签： bootstrap javascript css
于 2022-02-22 11:49:27 首次发布
本文链接：https://blog.csdn.net/leadseczgw01/article/details/123064989
版权
前端专栏收录该内容
39 篇文章
订阅专栏
此博客介绍了一个用于分析xxx平台热卖商品的工具，通过选择不同的品类如连衣裙或衬衫，展示实时销量和商品详情。通过AJAX实现动态加载数据，便于用户查看最畅销的单品数据。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="multipart/form-data; charset=utf-8" />
    <title>热卖商品分析-xxx热卖单品 V1.0.1</title>
    <link rel="stylesheet" href="../../css/bootstrap.css"/>
    <link rel="stylesheet" href="../../css/bootstrapValidator.css"/>

    <script type="text/javascript" src="../../js/jquery.min.js"></script>
    <script type="text/javascript" src="../../js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../../js/bootstrapValidator.js"></script>

    <style type="text/css">
        .modal-header{
            padding: 0;
        }
        .div-main h3{
            font-size: 14px;
            height:42px;
            line-height: 42px;
            margin: 0;
            padding: 0 80px 0 20px;
        }
        .div-main label{
            margin-left: 0;
            font-weight: 400;
        }
        .div-main {
        }
        .form-control{
            width: 100px;
        }
        .modal-content{
            max-height: 15000px;
            height: auto;
        }
        .form-inline{
            margin-left: 30px;
        }
        .container-item{
            margin-left: 20px;
            margin-right: 20px;
        }
        .list-inline{
            margin-left: 30px;
        }
        .font-item{
            font-size: 13px;
        }
        .img-item{
            width: 203px;
        }
        .li-item{
            cursor: pointer;
            width: 222px;
            height: 300px;
            margin-left: 10px;
        }
        .card {
            margin-left: 10px;
        }
        .div-img{
            height: 100%;
            width: 100%;
            float: left;
            margin-bottom: 10px;
        }
        .span-sale{
            margin-left: 80px;
        }
        .p-desc {
            border: 1px;
            line-height: 30px;
            height: 60px;
            max-height: 60px;
            overflow: hidden;/* 超出的文本隐藏 */
            text-overflow: ellipsis; /* 溢出用省略号显示 */
            display: -webkit-box; /* 将对象作为弹性伸缩盒子模型显示 */
            -webkit-box-orient: vertical; /* 这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数 */
            -webkit-line-clamp: 2; /*  从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式） */
        }
    </style>
</head>
<body>
<!--模态框-->
<div class="div-main">
    <div class="modal-content">

        <form id="formId" class="form-inline" role="form" action="/selenium/getskwsalebyclass" method="post">
            <div class="modal-header">
                <h3>商品分析-xxx热卖单品</h3>
            </div>

            <div class="modal-body">
                <div class="form-group">
                    <label class="sr-1" for="goodsClassId">品类：</label>
                    <select class="form-control" id="goodsClassId" name="goodsClass" onchange="selectOnChang(this)">
                        <option value="连衣裙">连衣裙</option>
                        <option value="衬衫">衬衫</option>
                    </select>
                </div>
            </div>
        </form>

        <div class="container-item" id="mainContentDiv">
            <ul class="list-inline" id="mainContentUl">
                <li class="li-item">
                    <div class="card">
                        <div class="div-img">
                            <img class="card-img-top img-item" src="https://img1.vvic.com/upload/1634153146192_501848.png?x-oss-process=image/resize,mfit,h_230,w_230" alt="加载中">
                        </div>
                        <div class="card-body">
                            <h5 class="card-title font-item">
                                <span>￥60</span>
                                <span class="span-sale">销量:129561</span>
                            </h5>
                            <p class="card-text font-item p-desc">实拍 刺绣两件套连衣裙</p>
                        </div>
                    </div>
                </li>
                <li class="li-item">
                    <div class="card">
                        <div class="div-img">
                            <img class="card-img-top img-item" src="https://img1.vvic.com/upload/1634153146192_501848.png?x-oss-process=image/resize,mfit,h_230,w_230" alt="加载中">
                        </div>
                        <div class="card-body">
                            <h5 class="card-title font-item">
                                <span>￥60</span>
                                <span class="span-sale">销量:129561</span>
                            </h5>
                            <p class="card-text font-item p-desc">实拍2021新款春夏季裙子碎花连衣裙女装复古法式显瘦a字小个子</p>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>

<script type="text/javascript">
    
    $(
        console.log("$.in")
    );
    
    function selectOnChang(obj) {
        // 构造请求参数
        var goodsClass = obj.options[obj.selectedIndex].value;
        var dataValue = {};
        dataValue.goodsClass = goodsClass;
        var dataParam = {};
        dataParam.data = dataValue;
        dataParam.data = JSON.stringify(dataValue);

        $.ajax({
            url: "/selenium/getskwsalebyclass",
            type: "POST",
            contentType: "application/x-www-form-urlencoded",
            data: dataParam,
            success:function (message) {
                var retJson = JSON.parse(message);
                console.log(retJson);
                var flag = retJson['flag'];
                var total = retJson['total'];
                var mainContentDiv = $("#mainContentUl");
                mainContentDiv.empty();
                if(flag && total > 0){
                    console.log("获取数据成功!");
                    var dataArray = retJson['data'];
                    for(var index in dataArray){
                        var subJson = dataArray[index];
                        var name = subJson['itemName'];
                        var url = subJson['itemPicUrl'];
                        var price = subJson['showPrice'];
                        var sale = subJson['itemSale'];
                        var liStr = "                <li class=\"li-item\">\n" +
                            "                    <div class=\"card\">\n" +
                            "                        <div class=\"div-img\">\n" +
                            "                            <img class=\"card-img-top img-item\" src=\""+url+"\" alt=\"加载中\">\n" +
                            "                        </div>\n" +
                            "                        <div class=\"card-body\">\n" +
                            "                            <h5 class=\"card-title font-item\">\n" +
                            "                                <span>￥"+price+"</span>\n" +
                            "                                <span class=\"span-sale\">销量:"+sale+"</span>\n" +
                            "                            </h5>\n" +
                            "                            <p class=\"card-text font-item\">"+name+"</p>\n" +
                            "                        </div>\n" +
                            "                    </div>\n" +
                            "                </li>";
                        mainContentDiv.append(liStr);
                    }
                }else{
                    console.log("未获取到数据!");
                    mainContentDiv.append("未获取到数据!");
                }
            },
            error:function (message) {
                console.log("提交失败"+JSON.stringify(message));
            }
        });
    }

</script>

</body>
</html>