竹___ 2018-05-10 11:19 采纳率: 100%
浏览 5426
已采纳

HTML + JS 列表显示图片

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

  • 写回答

11条回答 默认 最新

  • Kiloveyousmile 2018-05-10 13:19
    关注

    大概看了一下，可以这样:

    index.html

    <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <script src="main.js"></script>
</head>
<body>
  <div id="main">
  </div>
</body>
</html>

    main.css

     html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
#main {
  width: 800px;
  height: 100%;
  margin: auto;
}
.info_table {
  width: 100%;
  height: 60px;
  display: -webkit-flex; /* Safari */
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
}
.info_person {
  width: 20%;
  height: 100%;
  flex-grow:1;
}
.person_img {
  width: 100%;
  height: 90%;
}
.person_msg {
  /* 自己调整 */
  height: 20%;
  width: 100%;
}
.msg_style {
  display: block;
  font-size: 8px;
  text-align: center;
}

    main.js

    // 数据格式
var data = [
  {
    img: './img/1.jpg',
    name: '李阳',
    num: 'xxxx23xxxx',
    state: '正在干活'
  },
  {
    img: './img/2.jpg',
    name: '李阳',
    num: 'xxxx23xxxx',
    state: '正在干活'
  },
  {
    img: './img/3.jpg',
    name: '李阳',
    num: 'xxxx23xxxx',
    state: '正在干活'
  },
  {
    img: './img/4.jpg',
    name: '李阳',
    num: 'xxxx23xxxx',
    state: '正在干活'
  },
  {
    img: './img/5.jpg',
    name: '李阳',
    num: 'xxxx23xxxx',
    state: '正在干活'
  }
]

$().ready(function () {
  for(i = 0; i < data.length; i += 5) {
    $("#main").append('<div class="info_table"></div>')
    for(j = 0; j < 5; j++) {
      let element = '<div class="info_person">\
      <img src="'+ data[i+j].img + '" class="person_img" />\
      <div class="person_info">\
      <span class="msg_style">' + data[i+j].name + '</span>\
      <span class="msg_style">' + data[i+j].num + '</span>\
      <span class="msg_style">' + data[i+j].state + '</span>\
      </div>\
      </div>'
        $(`.info_table:eq(${i})`).append(element)
    }
  }
})
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(10条)

报告相同问题？

问题事件

  • 请选择合适的标签 5月18日

悬赏问题

  • ¥15 js调用html页面需要隐藏某个按钮
  • ¥15 ads仿真结果在圆图上是怎么读数的
  • ¥20 Cotex M3的调试和程序执行方式是什么样的？
  • ¥20 java项目连接sqlserver时报ssl相关错误
  • ¥15 一道python难题3
  • ¥15 牛顿斯科特系数表表示
  • ¥15 arduino 步进电机
  • ¥20 程序进入HardFault_Handler
  • ¥15 oracle集群安装出bug
  • ¥15 关于#python#的问题：自动化测试