使用html实现瀑布流图片浏览页面,要有个按钮能进行等宽和等高布局切换
时间: 2023-11-28 22:47:32 浏览: 36
可以使用CSS3实现瀑布流布局,然后通过JavaScript监听按钮点击事件来进行等宽和等高布局的切换。
以下是一个示例代码:
HTML部分:
```html
<div class="waterfall">
<div class="item">
<img src="image1.jpg" alt="Image 1">
</div>
<div class="item">
<img src="image2.jpg" alt="Image 2">
</div>
<div class="item">
<img src="image3.jpg" alt="Image 3">
</div>
<!-- more items -->
</div>
<button id="layout-btn">切换布局</button>
```
CSS部分:
```css
.waterfall {
column-count: 3; /* 列数 */
column-gap: 20px; /* 列间距 */
}
.item {
break-inside: avoid; /* 防止元素被分割 */
padding: 10px;
margin-bottom: 20px;
background-color: #f5f5f5;
border-radius: 5px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.item img {
max-width: 100%; /* 图片宽度不超过容器宽度 */
display: block; /* 去除图片底部空白 */
}
```
JavaScript部分:
```javascript
const layoutBtn = document.getElementById('layout-btn');
const waterfall = document.querySelector('.waterfall');
layoutBtn.addEventListener('click', () => {
if (waterfall.classList.contains('equal-width')) {
waterfall.classList.remove('equal-width');
waterfall.classList.add('equal-height');
} else {
waterfall.classList.remove('equal-height');
waterfall.classList.add('equal-width');
}
});
```
在JavaScript中,我们为按钮元素添加了一个点击事件监听器。当按钮被点击时,通过切换waterfall元素的class属性来改变布局。
我们还需要添加以下CSS规则来实现等高布局:
```css
.equal-height {
column-fill: balance; /* 平衡分布 */
}
```
这样就可以实现瀑布流图片浏览页面,并且能够通过按钮进行等宽和等高布局的切换了。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)