js瀑布流写一下图片排列
时间: 2024-03-08 20:02:43 浏览: 17
好的,以下是一个简单的 JavaScript 瀑布流图片排列的实现:
HTML 代码:
```html
<div id="waterfall"></div>
```
CSS 代码:
```css
#waterfall {
column-count: 4;
column-gap: 10px;
}
.waterfall-item {
margin-bottom: 10px;
break-inside: avoid;
}
```
JavaScript 代码:
```javascript
// 图片地址数组
var imgUrls = [
'img1.jpg',
'img2.jpg',
'img3.jpg',
'img4.jpg',
'img5.jpg',
'img6.jpg',
'img7.jpg',
'img8.jpg',
'img9.jpg',
'img10.jpg'
];
// 获取瀑布流容器
var waterfall = document.getElementById('waterfall');
// 插入图片
for (var i = 0; i < imgUrls.length; i++) {
var img = document.createElement('img');
img.src = imgUrls[i];
img.className = 'waterfall-item';
waterfall.appendChild(img);
}
```
这里的实现使用了 CSS3 的多列布局 `column-count` 和 `column-gap` 属性来实现瀑布流排列效果,同时使用 `break-inside: avoid;` 来避免图片被分割成两半。JavaScript 部分则是动态插入图片元素到瀑布流容器中。