在不使用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>
相关推荐
魏大帅。2 分钟前
Axios 的 responseType 属性详解及 Blob 与 ArrayBuffer 解析
前端·javascript·ajax
花花鱼9 分钟前
vue3 基于element-plus进行的一个可拖动改变导航与内容区域大小的简单方法
前端·javascript·elementui
k093312 分钟前
sourceTree回滚版本到某次提交
开发语言·前端·javascript
神奇夜光杯20 分钟前
Python酷库之旅-第三方库Pandas(202)
开发语言·人工智能·python·excel·pandas·标准库及第三方库·学习与成长
Themberfue22 分钟前
Java多线程详解⑤(全程干货!!!)线程安全问题 || 锁 || synchronized
java·开发语言·线程·多线程·synchronized·
plmm烟酒僧24 分钟前
Windows下QT调用MinGW编译的OpenCV
开发语言·windows·qt·opencv
测试界的酸菜鱼35 分钟前
Python 大数据展示屏实例
大数据·开发语言·python
web行路人43 分钟前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
番茄小酱0011 小时前
Expo|ReactNative 中实现扫描二维码功能
javascript·react native·react.js
晨曦_子画1 小时前
编程语言之战:AI 之后的 Kotlin 与 Java
android·java·开发语言·人工智能·kotlin