html 图片纵向列表,HTML + JS 列表显示图片
梦里花落0921
大概看了一下，可以这样:index.htmlnbsp;html>
Page Titlemain.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
$("#main").append('
for(j = 0; j
let element = '
\
' + data[i+j].name + '\
' + data[i+j].num + '\
' + data[i+j].state + '\
$(`.info_table:eq(${i})`).append(element)
}
}
})