html + js 列表显示图片与图片信息

竹___ 2018-05-10 07:45:52

从后台读取出来的图片与图片信息，现在想在页面以列表形式展现出来，上面显示图片下面显示一些图片信息，一列显示五张。就像图片中这样

哪位好心人帮帮忙在线等

...全文

814 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

竹___ 2018-05-11

打赏
举报

引用 1 楼 winzond 的回复:

哥们，给你一个写死的，要灵活应用，就把table、tr、td换成div，方法参考CSS浮动，http://www.w3school.com.cn/css/css_positioning_floating.asp

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        table{border:1px solid black;text-align:center}
    </style>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
    <script>
        $(document).ready(function () {
            $.ajax({
                //后台获取数据
                success: function (result) {
                    var newimg = $("<td></td>").text("<img src='" + "后台获取的图片地址" + "'/>");
                    $(".img").append(newimg);
                    var newtext = $("<td></<td>").text("后台获取的文字");
                    $(".text").append(newtext);
                }
            });
        });
    </script>
</head>
<body>
    <table>
        <tr class="img">
            <td><img src="img1.jpg"/></td>        <!--第一格图片-->
            <td><img src="img2.jpg"/></td>        <!--第二格图片-->
            <td><img src="img3.jpg" /></td>        <!--第三格图片-->
            <td><img src="img4.jpg" /></td>        <!--第四格图片-->
            <td><img src="img5.jpg" /></td>        <!--第五格图片-->
        </tr>
        <tr class="text">
            <td>文字一</td>
            <td>文字二</td>
            <td>文字三</td>
            <td>文字四</td>
            <td>文字五</td>
        </tr>
    </table>
</body>
</html>

虽然没用这种方法，也谢谢你的回答

winzond 2018-05-10

打赏
举报

哥们，给你一个写死的，要灵活应用，就把table、tr、td换成div，方法参考CSS浮动，http://www.w3school.com.cn/css/css_positioning_floating.asp

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        table{border:1px solid black;text-align:center}
    </style>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
    <script>
        $(document).ready(function () {
            $.ajax({
                //后台获取数据
                success: function (result) {
                    var newimg = $("<td></td>").text("<img src='" + "后台获取的图片地址" + "'/>");
                    $(".img").append(newimg);
                    var newtext = $("<td></<td>").text("后台获取的文字");
                    $(".text").append(newtext);
                }
            });
        });
    </script>
</head>
<body>
    <table>
        <tr class="img">
            <td><img src="img1.jpg"/></td>        <!--第一格图片-->
            <td><img src="img2.jpg"/></td>        <!--第二格图片-->
            <td><img src="img3.jpg" /></td>        <!--第三格图片-->
            <td><img src="img4.jpg" /></td>        <!--第四格图片-->
            <td><img src="img5.jpg" /></td>        <!--第五格图片-->
        </tr>
        <tr class="text">
            <td>文字一</td>
            <td>文字二</td>
            <td>文字三</td>
            <td>文字四</td>
            <td>文字五</td>
        </tr>
    </table>
</body>
</html>