后台传过来的图片按照自定义几行几列显示,多的图片显示滚动条查看
时间: 2023-05-21 17:05:11 浏览: 60
好的,你需要使用CSS来实现这个功能,具体实现方法如下:
1. 首先,在HTML中创建一个容器,用于存放需要展示的图片,如下所示:
```html
<div class="image-container">
<!-- 在这里添加需要展示的图片 -->
</div>
```
2. 在CSS中设置该容器的样式,包括宽度、高度、边距、滚动条等,以及子元素的样式:
```css
.image-container {
width: 600px;
height: 400px;
overflow: auto;
/* 设置滚动条样式 */
scrollbar-width: thin;
scrollbar-color: #ccc #fff;
}
.image-container img {
display: block;
float: left;
width: 200px;
height: 200px;
margin: 5px;
}
```
其中,通过设置`float: left`让图片在同一行显示,设置`margin`为5px让图片之间有一定的间距。
3. 最后,通过JavaScript动态地添加图片,使其按照指定的几行几列排列,代码如下:
```javascript
var container = document.querySelector('.image-container');
var numRows = 3; // 设置行数
var numCols = 4; // 设置列数
var numImages = 12; // 设置图片数量
for (var i = 1; i <= numImages; i++) {
var img = document.createElement('img');
img.src = 'path/to/image' + i + '.jpg';
container.appendChild(img);
// 计算图片的位置
var row = Math.floor((i - 1) / numCols);
var col = (i - 1) % numCols;
img.style.top = row * 210 + 'px';
img.style.left = col * 210 + 'px';
}
```
通过计算每个图片的位置,将其定位到指定的行列上,其中,`top`和`left`是用来设置每个图片的位置的。