在不使用js在情况下只用css实现瀑布流效果

使用到的是grid 布局,需要注意的是grid-template-rows: masonry; 目前只有Firefox 浏览器支持这个效果,而且还是一个实验性属性需要在设置里面开发实验性选项才行。

实例

html 复制代码
<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
    <style>
        #img {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-gap: 10px;
            grid-template-rows: masonry;
        }
        #img img {
            width: 200px;
        }
    </style>
</head>
<body>
    <div id="img">
    </div>
    <script>
        const img =  document.getElementById('img')
        let ele = ''
        for (let i = 0; i < 14; i++) {
            ele += `<img src="./images/img (${i+1}).jpg" />`
            
        }
        img.innerHTML = ele

    </script>
</body>
</html>
相关推荐
小诸葛的博客22 分钟前
client-go如何监听自定义资源
开发语言·后端·golang
入 梦皆星河22 分钟前
go原理刨析之channel
开发语言·后端·golang
Pandaconda27 分钟前
【新人系列】Golang 入门(十二):指针和结构体 - 上
开发语言·后端·golang·go·指针·结构体·后端开发
6<729 分钟前
【go】类型断言
开发语言·后端·golang
旷野本野1 小时前
【Java】Maven
java·开发语言·maven
我自纵横20231 小时前
事件处理程序
开发语言·前端·javascript·css·json·ecmascript
坊钰1 小时前
【MySQL 数据库】数据类型
java·开发语言·前端·数据库·学习·mysql·html
我是小路路呀1 小时前
css 文字换行每一个字渐变
前端·css
拉不动的猪2 小时前
刷刷题50(vue3)
前端·javascript·面试
网安小陈2 小时前
【网安】处理项目中的一些常见漏洞bug(java相关)
java·开发语言·数据库·安全·web安全·网络安全·bug