HTML + JS 列表显示图片

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

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

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

给你提一些建议：
1. 通过flex布局，可以自适应；当然css设置固定值，或者百分比也行
2. 通过javascript动态创建html DOM元素，从而实现后端数据的渲染。

根据请求后台的数据，肯定是个数组，遍历数组数据，每个元素是对象了

用对象的 imageurl, name, number , 给dom标签赋值；
只要你能写出来一个，多个也是一样的道理。

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

')
for(j = 0; j < 5; j++) {
let element = '

\
' + data[i+j].name + '\
' + data[i+j].num + '\
' + data[i+j].state + '\

'
$(.info_table:eq(${i})).append(element)
}
}
})

用ajax直接动态加载出来

用bootstrap很简单就能实现了

前端用ul标签，后台返回list，js文件用ajax请求获取list，循环list然后用li标签填充ul，图片可以作为li内的一个image标签，文本信息可以做一个span或者textarea标签
，然后就是样式问题了

三个步骤：（只讲思路）

1.创建一个

2.偶数

放图片
奇数放文字

3.给

和内

中的图片文字居中属性

试了一下上面的例子有点问题（试试多于五个的情况）改进如下：
main.css
@charset "UTF-8";
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#main {
width: 800px;
height: 100%;
margin: auto;
}
.info_table {
width: 100%;
height: 100px;
display: -webkit-flex; /* Safari /
display: flex;
flex-direction: row;
flex-wrap: nowrap;
/ justify-content: center; /
margin-top: 50px;
}
.info_person {
width: 20%;
height: 100%;
/ flex-grow:1; /
float: left ;
}
.person_img {
width: 100%;
height: 100%;
}
.person_msg {
/ 自己调整 /
height: 100%;
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 : '正在干活'
}, {
img : './img/5.jpg',
name : '李阳',
num : 'xxxx23xxxx',
state : '正在干活'
}, {
img : './img/5.jpg',
name : '李阳',
num : 'xxxx23xxxx',
state : '正在干活'
} ]
index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Page Title

<br> $().ready(function () {<br> for(var i = 0; i < data.length; i += 5) {<br> $("#main").append("<div id="+i/5+" class='info_table'></div>");<br> //console.log(data.length);<br> for(var j = 0; j < 5; j++) {<br> var info_table_num = i/5;<br><br> console.log(info_table_num);<br><br> if(data.length-i-j>0){<br> 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>'<br> $("#"+i/5+"").append(element);<br> console.log("向第"+info_table_num+"中加入了第"+(i+j)+"个");<br> }<br> }<br><br> }<br> })<br>

另需要jquery库，结果如下

望采纳。

jsp传的有点问题

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<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="css/main.css" />
  <script src="js/jquery.min.js"></script>
  <script src="js/main.js"></script>
  <script type="text/javascript">
  $().ready(function () {
  for(var i = 0; i < data.length; i += 5) {
    $("#main").append("<div id="+i/5+" class='info_table'></div>");
    //console.log(data.length);
    for(var j = 0; j < 5; j++) {
      var info_table_num = i/5; 
      console.log(info_table_num);  
      if(data.length-i-j>0){
      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>'
      $("#"+i/5+"").append(element);
      console.log("向第"+info_table_num+"中加入了第"+(i+j)+"个");
      }
    }  
  }
})
  </script>
</head>
<body>
  <div id="main">
  </div>
</body>
</html>

图片列表懒加载如何实现?