在不使用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>
相关推荐
10年前端老司机1 分钟前
微信小程序自定义组件
前端·javascript·微信小程序
cauyyl2 分钟前
react nativeWebView跨页面通信
javascript·react native·react.js
APItesterCris3 分钟前
跨平台数据采集方案:淘宝 API 对接 React Native 实现移动端实时监控
javascript·react native·react.js
十五年专注C++开发4 分钟前
Qt中的全局函数讲解集合(全)
开发语言·c++·qt·算法
浪裡遊12 分钟前
TypeScript中的函数类型定义与类型约束
javascript·ubuntu·typescript
martian66523 分钟前
信创时代技术栈选择与前景分析:国产替代背景下的战略路径与实践指南
开发语言·科技·系统安全·创业创新
Mintopia29 分钟前
# 使用 Three.js 实现带随机障碍物的小车行驶模拟
前端·javascript·three.js
Mintopia29 分钟前
图形学与坐标系入门教学
前端·javascript·计算机图形学
{⌐■_■}31 分钟前
【计网】认识跨域,及其在go中通过注册CORS中间件解决跨域方案,go-zero、gin
java·linux·开发语言·c++·中间件·golang·gin
ErizJ38 分钟前
Golang|外观模式和具体逻辑
开发语言·golang·外观模式