html显示在线图片,HTML + JS 列表显示图片

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

index.htmlhtml>

Page Title

main.csshtml, 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)

}

}

})