在不使用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>
相关推荐
codingandsleeping15 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙16 小时前
[译] Composition in CSS
前端·css
白水清风16 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
用户221520442780016 小时前
new、原型和原型链浅析
前端·javascript
阿星做前端16 小时前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧16 小时前
Promise 的使用
前端·javascript
天天扭码16 小时前
来全面地review一下Flex布局(面试可用)
前端·css·面试
用户4582031531717 小时前
CSS特异性:如何精准控制样式而不失控?
前端·css
前端康师傅17 小时前
JavaScript 作用域
前端·javascript
云枫晖17 小时前
JS核心知识-事件循环
前端·javascript